Question

我想知道如何隐藏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的垂直滚动条但是要继续流涎......？

Answer 1

如果我理解正确，您需要在页眉和页脚中添加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;
}

Answer 2

如果我的观点正确，您希望div 没有滚动条，但仍然使用鼠标滚轮或PgDn / PgUp滚动。正确？

我现在没有代码（你可以称我为一个糟糕的回答者;但是它已经很晚了，如果你想要它我可以在一两天内编辑这个答案给你正确的代码），但想法如下：

为鼠标滚轮和按键添加JavaScript事件侦听器（mousewheel DOMMouseScroll和keydown）;
使用鼠标滚轮事件对象delta获取滚动方向并向上滚动div（负数）或向下滚动（正数）;
捕获向下箭头，向上箭头，PgDn，PgUp和空格键的关键代码（我至少可以告诉您空格键为32）并让它们按索引向上或向下滚动div。

有用的链接：window.scrollTo()，HTML5 and JavaScript mouse wheel，JavaScript key codes

我还建议使用jQuery。这将使这项任务变得更加容易，而且这种类型的任务在整个应用程序中要轻得多。

请注意缺少代码，如果你还需要一些例子，我明天晚上会编辑这个。祝你好运！

我们如何隐藏div的滚动条？

2 个答案: