Question

当我将overflow: scroll;添加到固定叠加层div以使其内容可滚动时，我在浏览器窗口的右下角有两个滚动条，一个是浏览器的滚动条bar和第二个是div的滚动条。如何使固定的可滚动div覆盖浏览器的滚动条？

div {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: scroll;
}

Answer 1

如果您正在尝试修复html / body，则需要指定。

html, body {
    overflow: hidden;
}

然后，无论您想要滚动哪个div，请添加

div {
    overflow: scroll;
}

我已经制作了CodePen，所以你可以在这里看到：

http://codepen.io/brycesnyder/pen/pvomRa

或者，如果你想“隐藏”实际的滚动条..这是我刚刚尝试的修复。现在确定你为什么要这么做！ http://codepen.io/brycesnyder/pen/ZYENKj

Answer 2

好的，根据我的评论，这是答案：

您目前正在体验双滚动条，一个用于窗口，另一个用于div，正如我在此处所示：http://jsfiddle.net/eL5yvony/

有几种方法可以解决这个问题。

首先，也许最简单的方法是在html和body元素上设置overflow: hidden;，如下所示：http://jsfiddle.net/eL5yvony/1/

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

这消除了浏览器的滚动条，只显示div中的那个

或者，如果您的div是100％x 100％，那么您可以通过设置html和body元素的边距和填充来执行此类操作，而不会覆盖浏览器的滚动功能：http://jsfiddle.net/eL5yvony/4/

div{
    width: 100%; height: 100%;
    overflow: scroll;
}
html, body{
    width: 100%; height: 100%;
    margin: 0; padding: 0;
}

Answer 3

我认为这就是你要找的东西：

#parent{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-right: 15px; /* Increase this value for cross-browser compatibility */
}

来源：Hide scroll bar, but still being able to scroll

Answer 4

使用overflow: auto;

JSBIN上的演示：

http://jsbin.com/cedabegeju/2/edit

SE上的演示：

for (var i = 0 ; i++  < 1000; ) {
  setTimeout( function() {
    $('div').text($('div').text() + 'x ');
  }, i);
}

div {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>

</div>

如何使固定div覆盖浏览器的滚动条？

4 个答案:

JSBIN上的演示：

SE上的演示：