隐藏滚动条，已经自己实测在浏览器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. vue中axios的使用与封装

    分享下我自己的axios封装axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理 当然首先是npm安装axios 很简单$ npm install axios --save在 ...

  2. 前端模块开发的基础代码，兼容amd，cmd标准，也可以直接使用window来引用对象

    (function(global, factory) { if (typeof define === 'function' && define.amd) { define(functi ...

  3. springboot访问静态资源遇到的坑

    开始是以这种结构进行的,结果页面上一篇红,访问的页面是这样的 最终找出来问题,虽然每次调整路径都不对,最终查看多种方法可以看到了: 增加: package com.example.demo.confi ...

  4. centos下dnsmasq安装与配置

    说明1.dnsmasq是一款小巧且方便地用于配置DNS服务器和DHCP服务器的工具,适用于小型网络,它提供了DNS解析功能和可选择的DHCP功能. 2.dnsmasq可以解决小范围的dns查询问题,如 ...

  5. day--43 HTML标签和CSS基本小结

    HTML标签和CSS基本小结一:常用标签 01:块标签 p,h1--h6 ,hr ,div 02:内联标签 b,i,u,s 小提示:块标签可以嵌套内置元素或者某些块级元素,但内联元素不能包含块级元素 ...

  6. Android 给app加入百度地图

    1.获取sha1值 (1)win+R进入cmd窗口 (2)输入以下代码 C:\SoftApplication\javajdk\jdk1.8.0_151\bin>keytool -list -v ...

  7. samtools软件作用

    samtools的说明文档:http://samtools.sourceforge.net/samtools.shtml samtools是一个用于操作sam和bam文件的工具合集,包含有许多命令.以 ...

  8. C++_类继承1-从一个简单的类开始

    面向对象编程的主要目的之一是:提供可重用的代码.尤其是项目很庞大的时候,重用测试过的代码比重新编码代码要好得多. C++提供了更高层次的重用性.其中之一就是继承这个概念. 一些厂商提供了类库.类库由类 ...

  9. bzoj1041 圆上的整点 数学

    题目传送门 题目大意:求一个给定的圆(x^2+y^2=r^2),在圆周上有多少个点的坐标是整数. 思路:没思路,看大佬的博客(转载自https://blog.csdn.net/csyzcyj),转载只 ...

  10. G: 又见模法师

    G: 又见模法师 Time Limit: 1 s      Memory Limit: 128 MB        #include <stdio.h> ; typedef long lo ...