隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个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> //code from http://caibaojian.com/hide-scrollbar.html .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; }
总结
到此这篇关于CSS实现隐藏滚动条并可以滚动内容效果(三种方式实现)的文章就介绍到这了,更多相关css 隐藏滚动条滚动内容内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
对于网页制作者来说,最烦琐的事情可能就是给页面中的图片或文字加链接了。假如...
根据百度地图官方解释,在移动端 H5 页面中可监听下面这 4 个事件: touchstart, ...
工欲善其事,必先利其器! 就在不久之前,Java领域的开发神器 IntelliJ IDEA 终...
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能。测试了很久,终...
本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义,mask 译为遮罩。在 C...
web前端开发中避免不了要在页面上显示很多文章,如何才能从文中,文末点击快捷的...
前言 2021 年中国共产党将迎来建党 100 周年。百年来中国社会发生了沧桑巨变。从...
写给初用Nestj做项目的你(第二篇: 配置gitlab-runner操作gitlab) 如果不想自己搭...
考虑以下两段代码: 复制代码 代码如下: urlset url lochttp://www.caixw.com/ar...
链入式是把所有的 样式 放在一个或多个 外部样式表文件 中,这个文件是以 css 为...