如何使用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等各个浏览器
项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容. 如下图所示: 在谷歌浏览器如图一滚动条顺利隐藏,但是火狐就如图二了,有了滚动条丑的一批. ...
随机推荐
- P2410 [SDOI2009]最优图像 ZKW最大费用最大流
$ \color{#0066ff}{ 题目描述 }$ 小E在好友小W的家中发现一幅神奇的图画,对此颇有兴趣.它可以被看做一个包含N×M个像素的黑白图像,为了方便起见,我们用0表示白色像素,1表示黑色像 ...
- Ubuntu16.04更换下载源
更新源的方法 进入/etc/apt/ cd /etc/apt 对 sources.list文件进行备份: sudo cp sources.list sources.list.bak 打开源列表文件 s ...
- 【Leetcode】Divide Two Integers
Divide two integers without using multiplication, division and mod operator. class Solution { public ...
- Javascript 中 的坑..
### 1. 0 == '' 返回 true 0 === '' 返回false......... 切记...
- [SP1825] Free tour II
/* ----------------------- [题解] https://www.luogu.org/blog/IRving1-1/solution-sp1825 --------------- ...
- HDU - 1024 M子段最大和 简单DP
如何确保每个段至少一个数是关键(尤其注意负数情况) #include<iostream> #include<algorithm> #include<cstdio> ...
- 1129 Recommendation System （25 分）
Recommendation system predicts the preference that a user would give to an item. Now you are asked t ...
- 转 Monitoring Restore/Recovery Progress
ora-279 是可以忽略的报错 In general, a restore should take approximately the same time as a backup, if not l ...
- webstorm 搜索vue文件
1. Show IDE settings 状态修改为 ON
- js动画实现&&回调地狱&&promise
1. js实现动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...