想知道如何隐藏 div 元素的滚动条?
使用下面示例中的代码,当我们向其中写入大量文本时,中央 div 有一个垂直滚动条:
<html>
<body style="height:100%; width:100%">
<div id="header" style="position:absolute; background-color: red; top:0px; left:0px; height:200px; right:0px;overflow:hidden;">
</div>
<div id="content" style="position:absolute; background-color: silver; top:200px; bottom:200px; left:0px; right:0px; overflow:auto; ">
<p>Loremenrfei hwofhwefhewufwehfuwefwe fwefhw fwhe ufhhew fweofwehfo ewhohweweofwefoiweh w we fwe fweufweufhweuwheufwefuwefhwe fuhewfuiew fuwefwe wuiewuiwehufwefiuwehfi ewfw ew ifhweuifwei uwuweufheuiwhfiu fhwef hwf wwe wehfwewfweffwehfewh we fiwei fugha fuha FUHA fuHa Hafu fuh</p>
<ul>
<li>Traalalsalsasakskjasaslka asajsa sajsa jsasja</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>-</li>
<li>END</li>
</ul>
</div>
<div id="footer" style="position:absolute; background-color: green; bottom:0px; height:200px; left:0px; right:0px; overflow:hidden;">
</div>
</body>
</html>
我的问题是,我们如何才能隐藏中央 div 的垂直滚动条但继续滚动 ..?
最佳答案
如果我没理解错的话,您需要将 position: absolute
添加到页眉和页脚,并使用 index:-10
将内容滑动到它们下面。看这个demo
更新:添加相关代码以供引用(删除了所有内联样式,因为它不符合最佳实践)
.body {
width: 100%;
height: 100%;
}
#footer, #header, #content {
display:block;
position: fixed;
height: 100px;
left: 0;
width: 100%;
}
#footer {
bottom: 0;
color: white;
background-color: black;
}
#header {
color: white;
top: 0;
background-color: black;
}
#content {
top: 100px;
height: 300px;
position: absolute;
background-color: white;
z-index: -10;
}
关于javascript - 我们如何隐藏div的滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20061408/