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; }
方法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
.element { overflow: -moz-scrollbars-none; }
转自:3种方法实现CSS隐藏滚动条并可以滚动内容-前端开发博客
css-隐藏滚动条并可以滚动内容相关推荐
- 实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
- 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 隐藏滚动条 但是可以滚动
在做企业页面的时候,大部分页面都应该是活的,不应该写死,因为要从后台拿数据进行填充.而后台的数据是不确定的,有时候会让我们的容器撑得很大.这时候我们需要隐藏掉滚动条达到美观或者其他布局效果,隐藏掉单个 ...
最新文章
- 产品经理必备知识之网页设计系列(三)-移动端适配无障碍设计及测试
- Java 关键字和语句
- CentOS7 0安装jdk + tomcat
- .NET平台下WEB应用程序的部署(安装数据库和自动配置)
- Friendly Group Gym - 102769F 2020(并查集)ccpc秦皇岛分站赛
- 技术实践 | ICDE2021-大规模知识图谱预训练及电商应用
- 对话阿里云MVP裔隽跨界半生,不改赤子心
- xargs 将标准输入转换成命令行参数
- C++ 操作PDFlib实例
- Svn下载及安装(附带汉化包安装)
- VS2010的Ribbon怎样调用透明背景的图标
- 小程序苹果手机底部出现横杠处理
- 分时线的9代表什么_一位血亏百万股民血泪史告诉你:为什么要打板?
- 出现单实例模式毁坏Destroying singletons
- java不同时区时间转换,Java在不同时区转换时间
- DBLP 搜索爬虫项目
- 010_StringRedisTemplate
- 局域网流量监控软件以及其实现方式
- python视频网站项目_Python Flask 项目实战—构建微电影视频网站
- 换FasterRcnn模型backbone