zoukankan      html  css  js  c++  java
  • CSS 实现隐藏滚动条同时又可以滚动

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

             /* for Chrome */
            .content::-webkit-scrollbar {
                display: none;
            }

    方法2: 在内容容器A外面再嵌套一层容器B并设置 overflow:hidden ,容器A和容器B需要限制尺寸,就变相隐藏了,兼容所有浏览器。

     <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>超出部分滚动条</title>
    </head>
    <style type="text/css">
        .outer_container {
            /* 父容器设置宽度, 并超出部分不显示 */
             200px;
            height: 300px;
            overflow: hidden;
        }
        .outer_container > .content{
            /* 子容器比父容器的宽度多 17 px, 经测正好是滚动条的默认宽度 */
             217px;
            height: 300px;
            overflow-y: scroll;
        }
    </style>
    <body>
        <!-- 兼容所有浏览器的超出部分滚动不显示滚动条-->
        <div class="outer_container ">
            <div class="content">
                HELLO WORLD! </br>HELLO WORLD! </br>
                HELLO WORLD! </br>HELLO WORLD! </br>
                HELLO WORLD! </br>HELLO WORLD! </br>
                HELLO WORLD! </br>HELLO WORLD! </br>
                HELLO WORLD! </br>HELLO WORLD! </br>
                HELLO WORLD! </br>HELLO WORLD! </br>
                HELLO WORLD! </br>HELLO WORLD! </br>
                HELLO WORLD! </br>HELLO WORLD! </br>
                HELLO WORLD! </br>HELLO WORLD! </br>
                HELLO WORLD! </br>HELLO WORLD! </br>
            </div>
        </div>
    </body>
    </html>   
  • 相关阅读:
    贪心例题
    第十六周总结
    软件工程个人课程总结
    冲刺二十一天
    浅谈async/await
    浅谈设计模式的六大原则
    dotnetcore配置框架简介
    这一次,终于弄懂了协变和逆变
    科个普:进程、线程、并发、并行
    五分钟了解Semaphore
  • 原文地址:https://www.cnblogs.com/evaxtt/p/10147662.html
Copyright © 2011-2022 走看看