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上。 Firefox很好。我也试图摆弄溢出，但无法得到我想要的结果。

建议？

Answer 1

试试这个 -

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

Answer 2

有一个类似的问题。

问题出在html {}中

如果你使用这样的东西

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

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

Answer 3

今天看到这只在Safari中复制。问题是我有可滚动元素的子项与下面的CSS（强制GPU合成）：

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

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