实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。
方法1:计算滚动条宽度并隐藏起来
在本站的侧栏,你可以看到前端日报的那块内容并没有滚动条,但鼠标移上去却可以滚动内容。这是什么技术呢? 其实我只是把滚动条通过定位把它隐藏了起来。·
下面给一个简化版的代码:
<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;
这个代码巧妙的向右移动了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; }
方法3:css隐藏滚动条
同时该文章还分享了一种通过CSS隐藏滚动条的方法,不过这个方法不兼容IE,做移动端的可以使用。
那就是自定义滚动条的伪对象选择器::-webkit-scrollbar,详情请看之前的文章:CSS3自定义webkit滚动条样式
chrome 和Safari
.element::-webkit-scrollbar { width: 0 !important }
IE 10+
.element { -ms-overflow-style: none; }
Firefox
//code from http://caibaojian.com/hide-scrollbar.html .element { overflow: -moz-scrollbars-none; }
转载于:https://www.cnblogs.com/lguow/p/9667843.html
实现CSS隐藏滚动条并可以滚动内容相关推荐
- CSS隐藏滚动条并可以滚动内容
隐藏滚动条常用方法 .container::-webkit-scrollbar {display:none} 为了兼容其他的浏览器,可以用这样的方法: 在滚动区域外再套一层div,给这层div设置ov ...
- html+ul隐藏滚动条,2种方法实现CSS隐藏滚动条并可以滚动内容的方法
方法1:计算滚动条宽度并隐藏起来 html代码: Loremipsumdolorsitamet,consecteturadipiscingelit.Integervehiculaquamnibh,eu ...
- CSS实现隐藏滚动条并可以滚动内容效果(三种方式)
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
- css 隐藏滚动条 竖向y滚动,横向x不滚动
.bottom {overflow-x: hidden;overflow-y: scroll; } 参考博客: 3种方法实现CSS隐藏滚动条并可以滚动内容
- CSS隐藏滚动条,保留滚动功能
CSS隐藏滚动条,保留滚动功能 原理:设置父级为溢出隐藏,而子级不进行溢出隐藏设置同时改变子级的宽度使进度条溢出到父级外面. 设置父级overflow:hidden;是为了使父级溢出隐藏.再设置子级的 ...
- CSS实现隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
- 【前端大概一分钟】css隐藏滚动条同时可以滚动
1. 通过 ::-webkit-scrollbar 伪元素 .inner-container::-webkit-scrollbar {display: none; } 复制代码 简单粗暴,但是兼容性不 ...
- css 隐藏滚动条 但是可以滚动
在做企业页面的时候,大部分页面都应该是活的,不应该写死,因为要从后台拿数据进行填充.而后台的数据是不确定的,有时候会让我们的容器撑得很大.这时候我们需要隐藏掉滚动条达到美观或者其他布局效果,隐藏掉单个 ...
- css-隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
最新文章
- CPU架构的llvm后端
- SQLite入门与分析(二)---设计与概念
- pytorch torch.cumsum(input, dim, out=None)函数(沿轴逐级累加)
- 计算机软件总体上分为,山大2017春季班期末考试 信息系统B
- JavaScript学习笔记:对象
- Swift之 ? 和 !
- “添加删除WIndows组件”中没有IIS时安装IIS方法
- 【路由设置】Macbook 双网卡同时访问内外网
- JSP文件的中文在浏览器上显示乱码解决方法
- Medium之1468.计算税后工资
- [CareerCup] 9.8 Represent N Cents 组成N分钱
- screen 使用命令
- 我怎样从珍爱网拿回18800会员费:交友平台相亲不靠谱
- oracle环境配置全过程
- 百万调音师—Audition 变调器
- 组合模式-Composite Pattern
- raid卡超级电容和电池的区别
- 中科创达与高通成立合资公司
- 从0到1搭建数仓DWD层案例实践
- HTML中的一些细节处理
热门文章
- IDEA-CAS-SSO单点登录-数据库
- 混合数字降噪、大动圈+动铁双单元 小米降噪项圈蓝牙开启众筹 售价仅439元
- 电商直播的选品方式有哪些?
- Android WiFi 基本框架
- MBR污水处理工艺的种类
- nodejs-编辑、生成word(docxtemplater、officegen、adm-zip)
- Oracle查询提示 ORA-00933: SQL command not properly ended 原因排查
- 主机名变为“bogon”的解决办法
- Mac终端出现@bogon的解决办法(恢复以前方法)
- MySQL8.0与MySQL5.7区别