html - HTML/CSS：滚动条出现在 HTML 元素下方

Question

在 Chrome 和 Safari 中，垂直滚动条出现在页面的 HTML 内容下方，如下所示：

我摆弄了一下::-webkit-scrollbar，但我能得到的最接近的是将滚动条宽度更改为0px. 该部分的 div 是：

.displayContent { min-width:620px; width:100%; height:auto; overflow:hidden; }

这发生在 Safari（但不是 iOS 上的移动 Safari）和 Chrome 中。火狐没问题。我也尝试过摆弄溢出，但无法得到我想要的结果。

建议？

Answer 1

有类似的问题。

问题出在 html{}

如果你使用这样的东西

 html {
    height: 100%;
    width: 100%;
    overflow: hidden;
 }

比滚动条上的叠加效果出现。删除 html 样式的溢出并将其放入正文样式中，它应该可以工作。

Answer 2

尝试这个 -

html, body { 
    height:100%; 
    width:100%; 
    overflow:auto;
}

Answer 3

今天看到这个只在 Safari 中重现。问题是我有带有以下 CSS 的可滚动元素的子元素（强制 GPU 合成）：

-webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0px);

解决方案是将相同的代码添加到容器（带有 的元素overflow:auto;），这会导致浏览器正确绘制所有内容（滚动条覆盖内容）。