如何使用CSS隐藏滚动条并且兼容大部分浏览器
隐藏滚动条，已经自己实测在浏览器Chrome, IE (6+), Firefox, Opera, Safari。
如下demo:
<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隐藏滚动条并且兼容大部分浏览器的更多相关文章
- 实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
- 3种方法实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其 实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1 ...
- css兼容大部分浏览器的文本超出部分显示省略号
css之字体多行省略(兼容大部分浏览器) 字体单行显示省略号 <style> .box1{ width: 500px; height: 1.5em; overflow: hidden; t ...
- css gray，grayscale，css变灰兼容大部分浏览器
css gray,grayscale,css变灰兼容大部分浏览器 html { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'ht ...
- css隐藏滚动条
xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transi ...
- css 隐藏滚动条
如何使用css隐藏滚动条 如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可.想要完全隐藏滚动条只需设置ov ...
- 图片上传，支持同步/异步、预览（MVC、uploadify异步提交、js预览、ajaxSubmit异步提交）兼容大部分浏览器，含代码
图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器. 第一种使用uploadify异步上传,上传后返回图片路径显示到页面. 每二种使用ajaxSubmit异步上传,为兼容I ...
- 如何让css隐藏滚动条 兼容谷歌、火狐、IE等各个浏览器
项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容. 如下图所示: 在谷歌浏览器如图一滚动条顺利隐藏,但是火狐就如图二了,有了滚动条丑的一批. ...
- css隐藏滚动条 兼容谷歌、火狐、IE等各个浏览器
项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容. 如下图所示: 在谷歌浏览器如图一滚动条顺利隐藏,但是火狐就如图二了,有了滚动条丑的一批. ...
随机推荐
- php tp5常用小知识
1. tp5 获取当前访问的模块名,控制器名,方法名 $request= \think\Request::instance(); $module = $request->module(); // ...
- SDUT OJ 数据结构实验之二叉树四：（先序中序）还原二叉树
数据结构实验之二叉树四:(先序中序)还原二叉树 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem ...
- rpm命令-以jenkins为例
1.列出所有安装的Jenkins rpm -qa | grep jenkins 2.软件是否安装:例如:jenkins是否安装 rpm -qa | grep jenkins 3.rpm -ql 列出软 ...
- CF702F T-Shirts FHQ Treap
题意翻译 题目大意: 有n种T恤,每种有价格ci和品质qi.有m个人要买T恤,第i个人有vi元,每人每次都会买一件能买得起的qi最大的T恤.一个人只能买一种T恤一件,所有人之间都是独立的.问最后每个人 ...
- 转载---<html>与<body>
关于根元素html以及body的对比,主要是遇到设置背景色的问题,这里转载张鑫旭的关于html和body对比的文.(直接贴过来,是为了以后自己方便看) 原文地址:http://www.zhangxin ...
- Qt 学习之路 2（42）：QListWidget、QTreeWidget 和 QTableWidget
Qt 学习之路 2(42):QListWidget.QTreeWidget 和 QTableWidget 豆子 2013年2月5日 Qt 学习之路 2 38条评论 上一章我们了解了 model/vie ...
- python学习之路---day26
网络的基本知识点 一:网络通信原理 连接两台计算机之间的Internet之间的协议一系列协议为互联网协议 互联网协议的功能是:定义计算机如何接入Internet,以及Internet的计算机通信标准 ...
- 洛谷P1443 马的遍历（bfs，注意输出格式）
题目描述 有一个n*m的棋盘(1<n,m<=400),在某个点上有一个马,要求你计算出马到达棋盘上任意一个点最少要走几步 输入输出格式 输入格式: 一行四个数据,棋盘的大小和马的坐标 输出 ...
- bzoj1934 Vote 善意的投票 最小割（最大匹配）
题目传送门 题目大意:很多小朋友,每个小朋友都有自己的立场,赞成或者反对,如果投了和自己立场不同的票会得到一个能量.又有很多朋友关系,如果一个人和他的一个朋友投的票不同,也会得到一个能量,现在问,通过 ...
- 1095 解码PAT准考证 （25 分）
PAT 准考证号由 4 部分组成: 第 1 位是级别,即 T 代表顶级:A 代表甲级:B 代表乙级: 第 2~4 位是考场编号,范围从 101 到 999: 第 5~10 位是考试日期,格式为年.月. ...