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实现太麻烦,直接将滚动条隐藏会更好一些. ...
随机推荐
- TemplateDoesNotExist
路径问题,可能是没有配置这一行:
- Java基础笔试练习（九）
1.下面所示的java代码,运行时,会产生()类型的异常 ? int Arry_a[] = new int[10]; System.out.println(Arry_a[10]); A.Arithme ...
- 2.RabbitMQ 的可靠性消息的发送
本篇包含 1. RabbitMQ 的可靠性消息的发送 2. RabbitMQ 集群的原理与高可用架构的搭建 3. RabbitMQ 的实践经验 上篇包含 1.MQ 的本质,MQ 的作用 2.R ...
- Spring系列（三）：Spring IoC源码解析
一.Spring容器类继承图 二.容器前期准备 IoC源码解析入口: /** * @desc: ioc原理解析 启动 * @author: toby * @date: 2019/7/22 22:20 ...
- win server 检查是否是ntfs文件系统
fsutil fsinfo volumeinfo c: | findstr /i "文件系统名"
- Java多线程编程之读写锁【ReentrantReadWriteLock】
有时候我们需要有这样的需求: 对于同一个文件进行读和写操作,普通的锁是互斥的,这样读的时候会加锁,只能单线程的读,我们希望多线程的进行读操作,并且读的时候不能进行写操作,写的时候不能进行 ...
- Chart 文件结构
一个 Chart 包由以下几个配置文件组成: wordpress/ Chart.yaml # Yaml文件,用于描述 Chart 的基本信息,包括名称版本等 LICENSE # [可选] 文本格式的协 ...
- consul安装配置，生产环境部署高可用环境
1.建立三个consul节点(一个server+两个client) 具体的过程见http://www.cnblogs.com/java-zhao/p/5375132.html 1)在终端下启动vagr ...
- ViewState到底是什么
ViewState是“客户端”状态保持的一种方案,ViewState是.net中特有的,其他的编程语言,如:Java.PHP中是没有ViewState这个概念的. 举个简单的例子ViewState的例 ...
- java之hibernate之单向的多对多关联映射
这篇 单向的多对多关联映射 1.如何在权限管理中,角色和权限之间的关系就是多对多的关系,表结构为: 2.类结构 Permission.java public class Permission impl ...