zoukankan      html  css  js  c++  java
  • CSS元素超出部分滚动,并隐藏滚动条【转】

    利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>超出部分隐藏滚动条</title>
    </head>
    <style type="text/css">
        #box {
     500px;
    height: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
    line-height: 30px;
    text-align: center;
    }
    #box::-webkit-scrollbar {
    display: none;
    }
    </style>
    <body>
        <!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->
        <div id="box">
        你好 </br>你好 </br>
    你好 </br>你好 </br>
    你好 </br>你好 </br>
    你好 </br>你好 </br>
    你好 </br>你好 </br>
    你好 </br>你好 </br>
    你好 </br>你好 </br>
        </div>
    </body>
    </html>
    

    利用内外层嵌套, 模拟, 兼容所有浏览器, 相对于方法一比较麻烦, 使用时不能对滚动条声明任何样式

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>超出部分滚动条</title>
    </head>
    <style type="text/css">
        #box {
        /* 父容器设置宽度, 并超出部分不显示 */
         500px;
            height: 300px;
            overflow: hidden;
        }
        #box > div {
            /* 子容器比父容器的宽度多 17 px, 经测正好是滚动条的默认宽度 */
             517px;
            height: 300px;
            line-height: 30px;
            text-align: center;
            overflow-y: scroll;
        }
    </style>
    <body>
        <!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->
        <div id="box">
            <div>
    你好 </br>你好 </br>
    你好 </br>你好 </br>
    你好 </br>你好 </br>
    你好 </br>你好 </br>
    你好 </br>你好 </br>
    你好 </br>你好 </br>
    你好 </br>你好 </br>
            </div>
        </div>
    </body>
    </html>
    

    来源:https://www.cnblogs.com/zouwangblog/p/11140912.html

  • 相关阅读:
    uni-app添加阿里巴巴图标库图标
    uni-app创建list列表
    vue-cli3.0运行单独的vue文件
    vue-cli3.0创建项目
    vue使用splice操作数组更新页面
    关于undefined出现的原因
    redux devtools的使用
    placeholder的颜色
    PHP json_encode 中文乱码
    浅谈服务治理与微服务
  • 原文地址:https://www.cnblogs.com/KillBugMe/p/13602231.html
Copyright © 2011-2022 走看看