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轴滚动条了。本人也是尝试了好多写法才得出这个结论,如有理解不正之处请指正。

  • 相关阅读:
    AHK的OnMessage
    VBA7种文档遍历法
    Excel VBA 找出选定范围不重复值和重复值
    Excel图片调整大小
    Excel信息提取之二
    Excel不同工作簿之间提取信息
    VBA7种遍历方法
    Exce信息提取
    php笔记之文件载入和异常处理
    php笔记之流程控制
  • 原文地址:https://www.cnblogs.com/peakleo/p/6209912.html
Copyright © 2011-2022 走看看