javascript - 我们如何隐藏div的滚动条?

标签 javascript jquery html css scrollbar

想知道如何隐藏 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/

相关文章:

jquery - 使用KendoUI解决控制台警告 "JQMIGRATE: jQuery.event.props.concat() is deprecated and removed"(2018.2.515)

javascript - 如何使用jquery更改object/embed标签的src值

html - 将图像放在所有元素的顶部

html - 将超链接添加到文本 block WPF

javascript - Bittrex v3 API - 无效签名响应

javascript - 单击后重置不同 Controller 的数据

javascript - jQuery 如果禁用此功能 - 则不起作用

jquery - 文本不淡入/淡出,可能是什么问题?

javascript - Redis GET 函数返回未定义

javascript - 为什么javascript在一个函数中而不是在另一个函数中从父作用域访问值?