如何使用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等各个浏览器
项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容. 如下图所示: 在谷歌浏览器如图一滚动条顺利隐藏,但是火狐就如图二了,有了滚动条丑的一批. ...
随机推荐
- 快速排序（一） 思想 JAVA实现
已知数组59.71.37.56.88.96.21.58.48.43 采用快速排序将数组有序. 快速排序同样采用了“分治策略”,使用递归的思路来实现算法. 快速排序的算法思想: 9.71.37.56.8 ...
- mac 配置charles
从官网下载链接http://www.charlesproxy.com/download 附上注册码: Registered Name: https://zhile.io License Key: 48 ...
- poj1182 食物链 带权并查集
题目传送门 题目大意:大家都懂. 思路: 今天给实验室的学弟学妹们讲的带权并查集,本来不想细讲的,但是被学弟学妹们的态度感动了,所以写了一下这个博客,思想在今天白天已经讲过了,所以直接上代码. 首先, ...
- 制作支持UEFI启动的原装系统安装盘
目前市面上大多数的计算机主板均支持UEFI,而且默认就是UEFI,会让新手安装系统遇到各种问题,最常见的就是找不到硬盘,通过光盘来安装操作系统,固然不会遇到什么问题,但是现在主流手段都是通过U盘来安装 ...
- VBS虚拟键盘十六进制列表
Set WshShell=WScript.CreateObject("WScript.Shell") '打开我的电脑WshShell.Sendkeys chr(&h88b6 ...
- 破解mysql数据库的密码
发现的1小问题 语句打错以后应该退出本语句,再继续打新语句.也可以打\c,退出本语句. 如何破解数据库的密码: 1:通过任务管理器或者服务管理,关掉mysqld(服务进程) 2:通过命令行+特殊参数开 ...
- 解决nginx文件服务器访问403
2018-10-24 nginx配置文件目录服务器 修改/etc/nginx/conf.d/default.conf或者在/etc/nginx/conf.d/目录下添加一配置文件,如下 server ...
- Android高级工程师面试题整理
这些题目是网友去百度.小米.乐视.美团.58.猎豹.360.新浪.搜狐等一线互联网公司面试被问到的题目.熟悉本文中列出的知识点会大大增加通过前两轮技术面试的几率. 主要分为以下几部分: (1)java ...
- 理解fig,ax = plt.subplots()
fig = plt.figure() ax = fig.add_subplot(1,1,1) fig, ax = plt.subplots(1,3),其中参数1和3分别代表子图的行数和列数,一共有 1 ...
- ansile 命令解释选项
1, -a MODULE_ARGS --args=MODULE_ARGS 作用传递参数给模块使用 2, --ask-vault-pass 执行时询问vault的密码 3, -B SECONDS --b ...