3种方法实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其 实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。
方法1：计算滚动条宽度并隐藏起来
在本站的侧栏，你可以看到前端日报的那块内容并没有滚动条，但鼠标移上去却可以滚动内容。这是什么技术呢？ 其实我只是把滚动条通过定位把它隐藏了起来。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="http://caibaojian.com/demo/reset.css">
<title>Document</title>
<style type="text/css">
a {
color: #333;
text-decoration: none;
} .daily-box {
margin-left: -5px;
height: 452px;
overflow: hidden;
position: relative;
width: 360px;
border: 1px solid #e6e6e6;
border-radius: 4px;
padding: 15px;
} .daily-box ul {
position: absolute;
left: 0;
padding-left: 5px;
top: 0;
bottom: 0;
right: -17px;
overflow: scroll;
overflow-x: hidden;
} .daily-box li {
margin-bottom: 10px;
line-height: 28px;
}
</style>
</head> <body>
<div class="daily-box">
<ul>
<li class="active"> <a rel="bookmark" href="http://caibaojian.com/fe-daily-20180316.html" title="20180316 前端开发日报"> <span class="daily-title">20180316 前端开发日报</span><h3 class="daily-desc">canvas实现的前端压缩裁剪工具；Typescript : 类 vs 接口；我的前端成长回顾；简单理解JavaScript异步与回调；Ja...</h3> </a></li>
<li> <a rel="bookmark" href="http://caibaojian.com/fe-daily-20180315.html" title="20180315 前端开发日报"> <span class="daily-title">20180315 前端开发日报</span><h3 class="daily-desc">Vue 2.0学习笔记：不同场景下组件间的数据通讯；Vue 组件的通信；ajax常见面试题；JS拾荒の字符串；React入门—r...</h3> </a></li>
<li> <a rel="bookmark" href="http://caibaojian.com/fe-daily-20180314.html" title="20180314 前端开发日报"> <span class="daily-title">20180314 前端开发日报</span><h3 class="daily-desc">JS函数知识点梳理；从零开始搭建一个vue项目；vue 服务端渲染折腾记录；网友搭了个《生活大爆炸》面部识别库，可以用 face-recog...</h3> </a></li>
<li> <a rel="bookmark" href="http://caibaojian.com/fe-daily-20180313.html" title="20180313 前端开发日报"> <span class="daily-title">20180313 前端开发日报</span><h3 class="daily-desc">2018年腾讯前端一面总结（面向2019届学生）；天下无难试之 HTTP 协议面试刁难大全；10 个技巧，让你更专业地使用 console ...</h3> </a></li>
<li> <a rel="bookmark" href="http://caibaojian.com/fe-daily-20180312.html" title="20180312 前端开发日报"> <span class="daily-title">20180312 前端开发日报</span><h3 class="daily-desc">《你不知道的 JavaScript 上卷》 学习笔记；webpack详解；Phaser 3.2.0 Kaori 发布，优秀的 HTML5 游...</h3> </a></li>
<li> <a rel="bookmark" href="http://caibaojian.com/fe-daily-20180311.html" title="20180311 前端开发日报"> <span class="daily-title">20180311 前端开发日报</span><h3 class="daily-desc">我对知乎前端相关问题的十问十答 – 张鑫旭；CSS3进阶：酷炫的3D旋转透视；vue常见面试题；使用 vue-virtual-c...</h3> </a></li>
</ul>
</div>
<script src="//caibaojian.com/demo/base.js"></script>
</body> </html>
下面给一个简化版的代码
<div class="outer-container">
<div class="inner-container">
......
</div>
</div>
.outer-container{
width: 360px;
height: 200px;
position: relative;
overflow: hidden;
}
.inner-container{
position: absolute;
left: 0;
top: 0;
right: -17px;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.outer-container {
width: 360px;
height: 200px;
position: relative;
overflow: hidden;
} .inner-container {
position: absolute;
left: 0;
top: 0;
right: -17px;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head> <body>
<div class="outer-container">
<div class="inner-container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<script src="//caibaojian.com/demo/base.js"></script>
</body> </html>
这个代码巧妙的向右移动了17个像素，刚好等于滚动条的宽度。这个值是我手动调试得来的。在chrome和IE没发现问题。
方法2：使用三个容器包围起来，不需要计算滚动条的宽度
该代码最早是在Microsoft博客上看到的，跟我上面的思路差不多，只不过人家里面又加多了一个盒子，将内容限制在盒子里面了。这样子就看不到滚动条同时也可以滚动。
代码如下：
<div class="outer-container">
<div class="inner-container">
<div class="content">
......
</div>
</div>
</div>
.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;
}
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.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">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies. Quisque vitae tincidunt purus. Vivamus feugiat bibendum erat, nec interdum urna porta sed. Nunc lobortis neque orci, ut suscipit nisl congue feugiat. Vivamus feugiat tellus quis cursus sollicitudin. Curabitur dolor massa, dictum ut ipsum in, porttitor pellentesque ante. Aenean egestas cursus tempor. Maecenas semper tortor sit amet egestas cursus. Mauris porttitor quis nisi ut tincidunt. Curabitur adipiscing eleifend nibh. Praesent mauris leo, consequat vitae orci eget, vestibulum bibendum nisi. Aliquam tempus diam ut tortor cursus, eget sodales augue adipiscing. Nulla at dignissim libero.
</div>
</div>
</div>
<script src="//caibaojian.com/demo/base.js"></script>
</body> </html>
方法3：css隐藏滚动条
同时该文章还分享了一种通过CSS隐藏滚动条的方法，不过这个方法不兼容IE，做移动端的可以使用。·
那就是自定义滚动条的伪对象选择器::-webkit-scrollbar，详情请看之前的文章：CSS3自定义webkit滚动条样式
chrome 和Safari
.element::-webkit-scrollbar { width: 0 !important } IE 10+
.element { -ms-overflow-style: none; } Firefox
.element { overflow: -moz-scrollbars-none; }
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.element{
width: 200px;
height: 200px;
overflow: scroll;
}
.element::-webkit-scrollbar { width: 0 !important }
.element { -ms-overflow-style: none; }
.element { overflow: -moz-scrollbars-none; }
</style>
</head> <body>
<div class="element">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies. Quisque vitae tincidunt purus. Vivamus feugiat bibendum erat, nec interdum urna porta sed. Nunc lobortis neque orci, ut suscipit nisl congue feugiat. Vivamus feugiat tellus quis cursus sollicitudin. Curabitur dolor massa, dictum ut ipsum in, porttitor pellentesque ante. Aenean egestas cursus tempor. Maecenas semper tortor sit amet egestas cursus. Mauris porttitor quis nisi ut tincidunt. Curabitur adipiscing eleifend nibh. Praesent mauris leo, consequat vitae orci eget, vestibulum bibendum nisi. Aliquam tempus diam ut tortor cursus, eget sodales augue adipiscing. Nulla at dignissim libero.
</div>
<script src="//caibaojian.com/demo/base.js"></script>
</body> </html>
3种方法实现CSS隐藏滚动条并可以滚动内容的更多相关文章
- 实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
- CSS实现隐藏滚动条并可以滚动内容
方法一: 计算滚动条宽度并隐藏起来,其实我只是把滚动条通过定位把它隐藏了起来,下面给一个简化版的代码: <div class="outer-container"> &l ...
- css隐藏滚动条依旧可以滚动
在做企业页面的时候,大部分页面都应该是活的,不应该写死,因为要从后台拿数据进行填充.而后台的数据是不确定的,有时候会让我们的容器撑得很大.这时候我们需要隐藏掉滚动条达到美观或者其他布局效果,隐藏掉单个 ...
- css隐藏滚动条
xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transi ...
- 实现最小宽度的几种方法及CSS Expression[转]
实现最小宽度的几种方法及CSS Expression[转] 实现最小宽度的几种方法:css表达式尽量不用 支持FF IE7 IE6 .test { background:blue; min-widt ...
- css 隐藏滚动条
如何使用css隐藏滚动条 如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可.想要完全隐藏滚动条只需设置ov ...
- 如何让css隐藏滚动条 兼容谷歌、火狐、IE等各个浏览器
项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容. 如下图所示: 在谷歌浏览器如图一滚动条顺利隐藏,但是火狐就如图二了,有了滚动条丑的一批. ...
- css隐藏滚动条 兼容谷歌、火狐、IE等各个浏览器
项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容. 如下图所示: 在谷歌浏览器如图一滚动条顺利隐藏,但是火狐就如图二了,有了滚动条丑的一批. ...
- 纯css实现隐藏滚动条仍可以滚动
移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,overflow:hidden;虽然可以隐藏滚动条,但是不能滚动.需要实现隐藏滚动条但是仍可以滚动,js实现太麻烦,直接将滚动条隐藏会更好一些. ...
随机推荐
- C++中的虚函数以及虚函数表
一.虚函数的定义 被virtual关键字修饰的成员函数,目的是为了实现多态 ps: 关于多态[接口和实现分离,父类指针指向子类的实例,然后通过父类指针调用子类的成员函数,这样可以让父类指针拥有多种形态 ...
- 01_Android入门
Android系统文件目录结构 / 代表系统的根目录 /data/app/ 存放着第三方的apk文件 /system/app/ 其中是系统中的应用安装文件 /data/data/packagename ...
- [转帖]keepalived工作原理和配置、使用
keepalived工作原理和配置.使用 https://www.iteye.com/blog/aoyouzi-2288124 keepalived是什么 keepalived是集群管理中保证集群高可 ...
- Vue.js 2.x render 渲染函数 & JSX
Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...
- Spring Cloud Alibaba学习笔记（22） - Nacos配置管理
目前业界流行的统一配置管理中心组件有Spring Cloud Config.Spring Cloud Alibaba的Nacos及携程开源的Apollo,本文将介绍Nacos作为统一配置管理中心的使用 ...
- (七) Docker 部署 MySql8.0 一主一从 高可用集群
参考并感谢 官方文档 https://hub.docker.com/_/mysql y0ngb1n https://www.jianshu.com/p/0439206e1f28 vito0319 ht ...
- 安装Ubuntu18.04系统
一.安装Ubuntu系统 进入系统安装的第一个界面,开始系统的安装操作.每一步的操作,左下角都会提示操作方式!! 1.选择系统语言-English 2.键盘设置-English 3.选择操作Insta ...
- Mybatis中三种关联关系的实现
目录 一对一查询 一对多查询 自关联查询: 多对多查询 总结: 三种关联关系:一对多,一对一,多对多 两种查询方式:嵌套查询,连接查询(也可称作:多表单独查询,多表连接查询) 每一种关联关系都可以通过 ...
- union 和 union all的区别
union 和 union all的区别 相同点和不同点 相同点:union和union all 都是对于多个查询结果的并集进行操作不同点:1.union 不会输出两个结果并集的重复行2.union ...
- 关于SqlServer数据库数据备份失败的问题
当备份的失败,出现说什么应该支持多少个介质簇,但实际出现了多少介质簇,这个时候就要考虑备份的地址是不是出现问题. 首先,检查备份地址,是不是多于两个以上,那么在备份的时候应该注意,备份地址最好留一个, ...