隐藏滚动条，已经自己实测在浏览器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/

如何使用CSS隐藏滚动条并且兼容大部分浏览器的更多相关文章

  1. 实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...

  2. 3种方法实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其 实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1 ...

  3. css兼容大部分浏览器的文本超出部分显示省略号

    css之字体多行省略(兼容大部分浏览器) 字体单行显示省略号 <style> .box1{ width: 500px; height: 1.5em; overflow: hidden; t ...

  4. css gray，grayscale，css变灰兼容大部分浏览器

    css gray,grayscale,css变灰兼容大部分浏览器 html { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'ht ...

  5. css隐藏滚动条

    xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transi ...

  6. css 隐藏滚动条

    如何使用css隐藏滚动条 如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可.想要完全隐藏滚动条只需设置ov ...

  7. 图片上传，支持同步/异步、预览（MVC、uploadify异步提交、js预览、ajaxSubmit异步提交）兼容大部分浏览器，含代码

    图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器. 第一种使用uploadify异步上传,上传后返回图片路径显示到页面. 每二种使用ajaxSubmit异步上传,为兼容I ...

  8. 如何让css隐藏滚动条 兼容谷歌、火狐、IE等各个浏览器

    项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容. 如下图所示: 在谷歌浏览器如图一滚动条顺利隐藏,但是火狐就如图二了,有了滚动条丑的一批. ...

  9. css隐藏滚动条 兼容谷歌、火狐、IE等各个浏览器

    项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容. 如下图所示: 在谷歌浏览器如图一滚动条顺利隐藏,但是火狐就如图二了,有了滚动条丑的一批. ...

随机推荐

  1. 18.阻止默认操作e.preventDefault();防止冒泡事件：e.stopPropagation()

      一.加了e.preventDefault();会阻止a标签默认的点击跳转效果 <!DOCTYPE html> <html lang="en"> < ...

  2. c#几种数据库的大数据批量插入（SqlServer、Oracle、SQLite和MySql）

    这篇文章主要介绍了c#几种数据库的大数据批量插入(SqlServer.Oracle.SQLite和MySql),需要的朋友可以了解一下. 在之前只知道SqlServer支持数据批量插入,殊不知道Ora ...

  3. js innerText、textContent、innerHTML的区别和各自用法

    //自定义函数 function my$(id) { return document.getElementById(id); } //点击按钮设置div中的文本内容 my$("btn&quo ...

  4. C#中实现https的双向认证

    1．  把浏览器中的证书导出为cer文件. 2.   代码如下: using System; using System.Net; using System.IO; using System.Secur ...

  5. Java ExecutorService 四种线程池

    1.new Thread的弊端 new Thead(new Runnable(){ @Override public void run() { // TODO Auto-generated metho ...

  6. class __init__()

    python 先定义函数才能调用 类是客观对象在人脑中的主观映射,生产对象的模板,类相当于盖房的图纸,生产工具的模具 模板 类:属性.方法 __init__() 这个方法一般用于初始化一个类但是 当实 ...

  7. CF F. MST Unification （最小生成树避圈法）

    题意 给一个无向加权联通图,没有重边和环.在这个图中可能存在多个最小生成树(MST),你可以进行以下操作:选择某条边使其权值加一,使得MST权值不变且唯一.求最少的操作次数. 分系:首先我们先要知道为 ...

  8. shopNC开发手册

    链接:   https://wenku.baidu.com/view/b9232d24dd3383c4bb4cd2c9.html https://wenku.baidu.com/view/ff1566 ...

  9. Nginx 安装--图片服务器搭建

    1.  nginx 需要依赖以下模块: gzip模块需要 zlib 库 rewrite模块需要 pcre 库 ssl 功能需要openssl库 1.1.安装pcre 1.         获取pcre ...

  10. PIE SDK 坐标系创建、定义、对比

    1.    坐标系创建 1.1    从WKT字符串导入空间参考 ISpatialReference接口是一个任何空间参考对象都实现的接口,它包含了所有空间参考对象都公有的方法和属性,如获得空间参考对 ...