zoukankan      html  css  js  c++  java
  • 如何隐藏滚动条但又能滚动

    先上代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #parent{
                overflow: hidden;
            }
            #child{
                width: 100%;
                height: 400px;
                overflow-y: scroll;
                padding-right: 20px; /* 滚动条的宽度 */
                border: 1px solid #ddd;
            }
        </style>
    </head>
    <body>
    <div id="parent">
        <div id="child">
            1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>
            1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>
            1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>1<br>2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br>
            end.
        </div>
    </div>
    </body>
    </html>

    实践出真知,简单描述下个人见解:实际上 #child 上是存在y轴的滚动条的, 只不过 #child 的宽度为 #parent 的100%,而又加上 20px 滚动条宽度的 padding-right, 所以实际 #child 的y轴滚动条在最右边,屏幕可视区域的右边 20px。而 #parent 的 overflow 为 hidden,故不可见。可以把 #parent 的overflow:hidden;去掉,会出现根元素html的x轴滚动条,右滑,便可以看到 #child 的y轴滚动条了。本人也是尝试了好多写法才得出这个结论,如有理解不正之处请指正。

  • 相关阅读:
    Javascript实现图片的预加载的完整实现
    python模块查找机制探究
    网络协议模拟之QQ微博分享接口应用
    每周一荐:差异利器Beyond Compare
    Asp.Net MVC4 入门介绍
    单元测试一例:学习断言、测试用例函数的编写
    开源一个网络框架
    .NET服务端持续输出信息到客户端
    Python服务器改造
    CYQ.Data 数据框架 V4.0
  • 原文地址:https://www.cnblogs.com/peakleo/p/6209912.html
Copyright © 2011-2022 走看看