专注前端行业精选
css隐藏滚动条 兼容谷歌、火狐、IE等各个浏览器
作者:鹏仔先生日期:2020-06-03 11:38:06浏览:2157分类:CSS
哦,千呐!终于来更新博客了!!!
项目中,页面效果需要展示一个页面的移动端效果,使用的是一个苹果手机样式背景图,咋也没用过苹果,咋也不敢形容。
如下图所示:
在谷歌浏览器如图一滚动条顺利隐藏,但是火狐就如图二了,有了滚动条丑的一批。
一句CSS代码,隐藏滚动条
div::-webkit-scrollbar { display:none }
但不兼容火狐,让人脑瓜疼的火狐啊,下面小方法解决火狐隐藏滚动条。
附代码如下
<style> .tp_box{ width: 500px; height: 400px; overflow: hidden; } .tp_box1{ width: 517px; height: 400px; overflow-x: hidden; overflow-y: scroll; } .tp_box2{ width: 100%; height: 500px; background: pink; } .tp_box3{ width: 100%; height: 500px; background: red; } .tp_box4{ width: 100%; height: 500px; background: black; } </style>
<div class="tp_box"> <div class="tp_box1"> <div class="tp_box2"></div> <div class="tp_box3"></div> <div class="tp_box4"></div> </div> </div>
一般滚动条默认宽度为17px,我们只需在有滚动条的盒子外面在套一个大盒子,子盒子比大盒子宽度多出17像素即可(这17px刚好存放滚动条位置),比如大盒子设置100px,子盒子设置117px,再给大盒子加上overflow:hidden; 让超出部分隐藏,那么就达到所谓的隐藏滚动条效果,其实滚动条并没有隐藏,只是被遮挡了看不见了而已,方法很实用。
附DEMO:
蓝奏云盘:点击下载
猜你还喜欢
- 09-14 nvm常用命令有哪些?nvm如何切换node版本?nvm如何下载node?
- 08-19 使用HBuilderX将vue或H5项目打包app
- 07-15 小程序嵌入网页向小程序跳转并传参,微信小程序中实现公众号授权获取openId
- 10-25 js替换字符串某个字符,js修改字符串中指定字符
- 10-20 uniapp中text-indent不起作用,uniapp首行缩进不管用如何解决?
- 08-12 elemtnui 表格如何修改某行文字颜色
- 08-03 vue中调用百度地图 获取经纬度
- 07-09 uniapp小程序实现录音 uniapp小程序长按录音 点击播放等功能(CSS实现语音音阶动画效果)
- 04-30 object-fit:cover;在小程序中不起作用,小程序图片变形了如何处理
- 04-26 (安卓/IOS)APP调用H5事件,H5调用APP事件
- 04-26 css防止图片变形 object-fit: cover; 属性介绍
- 03-15 VUE中实现点击打印功能 vue网页打印 vue-easy-print
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
暂无评论,来添加一个吧。