如何使用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等各个浏览器
项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容. 如下图所示: 在谷歌浏览器如图一滚动条顺利隐藏,但是火狐就如图二了,有了滚动条丑的一批. ...
随机推荐
- postgresql数据库异步流复制hot standby环境搭建
生命不息,test不止. 最近组里面修改了几个postgresql的bug,要进行回归测试,除了前面提到的WAL的RT测试和Mirroring Controller的RT测试,还要测试下postgre ...
- 选择排序 思想 JAVA实现
已知一个数组 9.29.95.47.79.37.18.56.96.22 使用选择排序是数组有序 选择排序同样是一个运行时间为O(N²)的排序算法. 算法思想:(以从小到大为例) 9.29.95.47. ...
- 如何让ie8地址栏下拉框里不显示历史记录和收藏夹
打开浏览器,点击IE浏览器上方工具——Internet选项——内容——自动完成的设置——地址栏里面的勾勾去掉,浏览历史记录和收藏夹里面的东西就自动没有了
- rabbitmq生产者代码,以及过程参数含义:
首先pom依赖: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="ht ...
- centos 安装搜狗
原文:https://www.cnblogs.com/blueherb/p/9521827.html 1.通过centos的搜狐到百度下载linux fo sougou 注:找到下载路径(定义为A) ...
- Python中的if __name__ == '__main__'
如何简单地理解Python中的if __name__ == '__main__' 1. 摘要 通俗的理解__name__ == '__main__':假如你叫小明.py,在朋友眼中,你是小明(__ ...
- JavaWeb学习笔记（一）—— Http协议
一.什么是HTTP协议 HTTP,超文本传输协议(HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览 ...
- 【转】nginx在Windows系统启动不了
这几天用到Nginx,第一次是win7系统下部署,一次性成功,第二次在win10系统下,部署失败. 出现的情况: 打开Nginx.exe,界面一闪而过,而且进程里面搜不到Nginx. 1.端口占用问题 ...
- svn学习笔记（二）
一.TortoiseSVN日常使用 1.1 浏览仓库 Repo-browser : 浏览仓库中资源信息 1.2 导入导出 Export :导出项目 ,和checkout区别 (checkout检出后文 ...
- Android HttpURLConnection的使用+Handler的原理及典型应用
1.介绍 总结:HttpURLConnection用来发送和接收数据. 2.ANR异常报错 (1)ANR(Application not response) 应用无响应, 主线程(UI线程) (2)如 ...