Question

有没有办法在浏览器的滚动条上叠加DIV？

我意识到可以使用overflow: none隐藏滚动条，但我想要将DIV放在滚动条上而不是隐藏它。

Answer 1

如果该滚动不适用于<html>元素，则可以将div放在滚动条上。这是代码，它使另一个div的滚动条溢出div。

HTML：

<body>
    <div id="content">
        Code goes here instead of BODY
        <div class="test"></div>
    </div>
    <div class="overflow">CONTENT FOR OVERFLOW ELEMENTS</div>
</body>

CSS：

html, body {
    margin:0;
    padding: 0;
}
#content {
    background: lime;
    overflow: auto;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.overflow {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    background: blue;
}

.test {
    background: red;
    height: 1000px;
    margin: 20px;
}

Answer 2

不，您无法在视口外渲染内容。但是，您可以删除浏览器的滚动条并替换自己的滚动条，从而提高灵活性。

有关详细信息，请参阅this question。

Answer 3

如果您查看Google文档中的文档，这与他们显示自己的滚动条非常相似。

如果使用overflow:hidden隐藏滚动条，则可以在页面右侧自由创建自己的元素。您不会“覆盖”浏览器的滚动条。相反，在您使用overflow:hidden隐藏它之前，您的滚动条将与浏览器位于同一位置。

您将深入体验模拟滚动条行为的有趣挑战，包括拖动，点击页面上/下区域等所有内容以及移动内容作为回应。

Answer 4

没有。除非您编写自己的滚动条实现，否则不能这样做。

编写自己的滚动条实现的缺点包括缺乏对其他设备的测试和支持。

但是，this library和this question可能会有所帮助。

Answer 5

您不能在文档/视口外放置div。但是，您可以隐藏滚动条并使用div或自定义滚动条取代它。

jsfiddle demo

CSS

#scrollbardiv{
    height:100%;
    width:12px;
    background:red;
    position:fixed;
    top:0px;
    right:0px;
}

.noscrl{
    overflow:hidden;
}
body{
    overflow:auto;
}

JS

$("#toggle").on("click", function(){

  $("body").toggleClass("noscrl");

})

是否可以在浏览器的滚动条上叠加DIV？

5 个答案: