zoukankan      html  css  js  c++  java
  • 如何使用CSS隐藏滚动条并且兼容大部分浏览器

    隐藏滚动条,已经自己实测在浏览器Chrome, IE (6+), Firefox, Opera, Safari。

    如下demo:

    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    Content 1
    <html>
    <head>
        <style>
            .element,
            .outer-container {
                width: 200px;
                height: 200px;
            }
    
            .outer-container {
                /* border: 5px solid purple; */
                position: relative;
                overflow: hidden;
            }
    
            .inner-container {
                position: absolute;
                left: 0;
                overflow-x: hidden;
                overflow-y: scroll;
            }
    
            .inner-container::-webkit-scrollbar {
                 display: none; 
            }
        </style>
    </head>
    <body>
        <div class="outer-container">
            <div class="inner-container">
                <div class="element">
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                    <div>Content 1</div>
                </div>
            </div>
        </div>
    </body>
    </html>

    参见:https://blogs.msdn.microsoft.com/kurlak/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari/

  • 相关阅读:
    开发周记
    开发日记03
    开发日记01
    MVC实例应用
    MVC概述
    23种设计模式简述
    xx系统属性分析
    淘宝网质量属性
    架构漫谈阅读笔记
    浅谈软件架构师工作流程
  • 原文地址:https://www.cnblogs.com/fangsmile/p/7390106.html
Copyright © 2011-2022 走看看