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/

  • 相关阅读:
    redis 安装,及基本命令
    Scrapy爬取大众养生网
    笔记——抓包工具抓取手机app内容
    爬取起点小说网(三)遇到的问题和代码解析
    爬取起点小说网(二)设计代码
    爬取起点小说网(一)设计思想
    python爬取豆瓣登陆验证码
    python爬去笔趣阁完整一本小说
    把爬取到的链接放到数据库
    python爬取网络图片
  • 原文地址:https://www.cnblogs.com/fangsmile/p/7390106.html
Copyright © 2011-2022 走看看