如何隐藏div的滚动条？

Question

Am wondering how we can hide the scrollbar of a div element ? 想知道如何隐藏div元素的滚动条吗？

Using the code in the example below, the central div has a vertical scrollbar when we 'll write lot of text into it : 使用下面示例中的代码，当我们向其中写入大量文本时，中央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>

My question so, is how we can hide the vertical scrollbar of the central div but to keep scrooling ..? 我的问题是，如何隐藏中央div的垂直滚动条，而又不让自己拖拉呢？

Answer 1

If I understand you correctly, You need to add position: absolute to the header and footer and slide the content under them by using index:-10 . 如果我理解正确，则需要在页眉和页脚中添加position: absolute ，并使用index:-10将内容滑动到它们下面。 See this demo 看这个演示

UPDATE: adding relevant code for reference (removed all inline styling as its not inline with best-practices) 更新：添加相关代码以供参考（删除了所有内联样式，因为它们不符合最佳做法）

.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

If I got your point right, you want the div not to have a scrollbar , but still scroll with the mouse wheel or PgDn/PgUp and so on . 如果我的观点正确，则您希望div 没有滚动条 ，但仍使用鼠标滚轮或PgDn / PgUp等滚动 。 Right? 对？

I don't have the code right now (you can call me a bad answerer for that; however it's late and if you want it I can edit this answer in a day or two to give you the proper code), but the idea is as follows: 我现在没有代码（您可以为此打电话给我一个不好的回答；但是已经晚了，如果您愿意，我可以在一两天内编辑此答案以为您提供正确的代码），但是我的想法是如下：

Add JavaScript event listeners for the mouse wheel and the key press ( mousewheel DOMMouseScroll and keydown ); 为鼠标滚轮和按键添加JavaScript事件侦听器（ mousewheel DOMMouseScroll和keydown ）；
Use the mouse wheel event object's delta for getting the scroll direction and scrolling the div up (negative) or down (positive); 使用鼠标滚轮事件对象的delta获取滚动方向并向上（负）或向下（正）滚动div；
Capture the key codes for down arrow, up arrow, PgDn, PgUp and spacebar (I can at least tell you spacebar is 32 ) and make them scroll the div up or down by an index. 捕获向下箭头，向上箭头，PgDn，PgUp和空格键（我至少可以告诉您空格键为32 ）的键代码，并使它们按索引向上或向下滚动div。

Helpful links: window.scrollTo() , HTML5 and JavaScript mouse wheel , JavaScript key codes 有用的链接： window.scrollTo（）， HTML5和JavaScript鼠标滚轮， JavaScript键代码

I'd also recommend using jQuery. 我也建议使用jQuery。 It would make such a task much easier, and many tasks of this kind much lighter in your apps overall. 这将使这项任务变得更加容易，并且在您的应用程序整体上，许多此类任务将变得更加轻松。

Please bear with the lack of code, if you still need some examples I'll edit this tomorrow night. 如果您仍然需要一些示例，请忍受缺少代码的麻烦，明天晚上我将对此进行编辑。 Best of luck! 祝你好运！

如何隐藏div的滚动条？

问题描述

2 个解决方案

解决方案1
0 已采纳 2013-11-19 02:08:25

解决方案2
0 2013-11-19 02:33:24

如何隐藏div的滚动条？

问题描述

2 个解决方案

解决方案1 0 已采纳 2013-11-19 02:08:25

解决方案2 0 2013-11-19 02:33:24

解决方案1
0 已采纳 2013-11-19 02:08:25

解决方案2
0 2013-11-19 02:33:24