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没问题。我也尝试调整溢出，但无法获得想要的结果。

有什么建议吗？

- Matthew

---

非常奇怪。您能发布一些HTML吗？ - isherwood

目前有太多的代码要发布，但是存在很多溢出情况。如果这不是很有帮助，我很抱歉。 - Matthew

你有任何transform样式吗？我看过一些例子，其中转换的元素会覆盖其他所有内容，包括滚动条，甚至在某些浏览器中超出了iframe。 - Mr Lister

你是自己给页面应用滚动条的吗？看起来这可能是一个问题，当你将滚动条应用到允许其他元素重叠的单个元素时会出现。 - Zach Saucier

我遇到了完全相同的问题，这个问题解决了吗？似乎在网上几乎找不到任何有关它的提及... - blabus

Answer 1

我遇到了类似的问题。

问题出现在html{}中。

如果你使用类似以下的东西：

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

然后滚动条上的覆盖效果就会出现。 将html样式中的溢出移除，并将其放入body样式中即可。

- MFGSparka

Answer 2

尝试这个-

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

- arunvishnun

Answer 3

今天在Safari中发现了这个问题。问题是我有一个可滚动元素的子元素具有以下CSS（以强制GPU合成）：

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

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

- Jesse