HTML / CSS:滚动条显示在HTML元素下方

问题描述 投票:7回答:3

在Chrome和Safari中,垂直滚动条显示在页面上的HTML内容下方,如下所示:

我摆弄了::-webkit-scrollbar,但我最接近的是将滚动条宽度更改为0px。该部分的div是:

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

这种情况发生在Safari(但不是iOS上的移动Safari)和Chrome上。 Firefox很好。我也试图摆弄溢出,但无法得到我想要的结果。

建议?

html css cross-browser
3个回答
2
投票

试试这个 -

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

4
投票

有一个类似的问题。

问题出在html {}中

如果你使用这样的东西

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

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


0
投票

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.