提问人：Nate 提问时间：2/10/2015 更新时间：7/19/2018 访问量：17841
是否可以在浏览器的滚动条上覆盖 DIV？
Is it possible to overlay a DIV over the browser's scrollbar?
答：
4赞
isherwood
2/10/2015
#1
不可以，您不能在视口之外渲染内容。但是，您可以删除浏览器的滚动条并替换自己的滚动条，从而具有更大的灵活性。
有关详细信息，请参阅此问题。
评论
0赞
isherwood
8/1/2017
@manuc66，我看不出这与这个话题有什么关系。
0赞
qaisjp
2/10/2015
#2
不。除非您编写自己的滚动条实现，否则您不能这样做。
编写自己的滚动条实现的缺点包括缺乏对其他设备的测试和支持。
1赞
AaronLS
2/10/2015
#3
如果你在谷歌文档中查看一个文档，这与他们显示自己的滚动条非常相似。
如果您使用 隐藏滚动条，那么您可以在页面右侧自由创建自己的元素。您不会“覆盖”浏览器的滚动条。相反，您的滚动条将简单地位于浏览器使用隐藏它之前的相同位置。overflow:hiddenoverflow:hidden
您将投入到模拟滚动条行为的有趣挑战中，从拖动、单击页面上下区域等到移动您的内容作为响应。
评论
0赞
brandito
7/17/2018
overflow: none;?
1赞
AaronLS
7/19/2018
@Brandito危险！
0赞
brandito
7/19/2018
好多了@AaronLS
1赞
AaronLS
7/19/2018
@Brandito 是的，最初的问题问了，我没有注意到错误。overflow:none
1赞
brandito
7/20/2018
如果我负责房产价值，我会选择“无”而不是“隐藏”。
7赞
Epsil0neR
2/10/2015
#4
您可以将 div 放在滚动条上，如果该滚动不是用于元素的。这是使 div 溢出到另一个 div 的滚动条上的代码。<html>
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;
}
评论
0赞
Alexander O'Mara
2/10/2015
打败我！这是另一个展示这一点的小提琴。
0赞
kasper Taeymans
2/10/2015
#5
不能将 div 放在文档/视口之外。但是，您可以隐藏滚动条并使用 div 或自定义滚动条代替它。
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