隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个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,隐藏滚动条,滚动内容
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
金钱帮资源网 Copyright www.kbjia.com
暂无“CSS实现隐藏滚动条并可以滚动内容效果(三种方式)”评论...
更新日志
2024年10月09日
2024年10月09日
- s14全球总决赛瑞士轮什么时候开始 s14瑞士轮开始时间介绍
- 晨报|《使命召唤21》全球发布预告 《异形:隔离》续作官宣开发中
- 隐形女联动毁灭博士?杰西卡·阿尔巴与小唐尼晒合影
- 《博德之门3》7号补丁发布后:Mod下载量达到2200万次!
- 徐璨宾《井底的蚯蚓》[FLAC/分轨][218.37MB]
- 王冰冰《Vaga Luna 月球漫游》[320K/MP3][62.76MB]
- 证声音乐图书馆《蔚蓝海岸·爵士度假日》[320K/MP3][59.79MB]
- 群星.1993-飞图合唱歌曲精丫飞图】【WAV+CUE】
- 王霏霏.2024-TOOOOO.BUSY(EP)【SNMUSIC】【FLAC分轨】
- 张宇.2016-好男人的情歌NEWXRCD【金牌大风】【WAV+CUE】
- 《食戟之灵》小林龙胆兔女郎比基尼版模型即将发售
- 重大里程碑!九号电动第500万台智能两轮电动车正式下线
- TGA主持人发文祝贺《暗喻幻想》 国外网友:提名稳了?
- 【原神】V5.0攻略 | 旋曜玉帛收集攻略(序号81~序号90)
- 【原神】V5.0攻略 | 旋曜玉帛收集攻略(序号91~序号100)