CSS隐藏浏览器滚动条

网页为什么会出现滚动条呢？

只要网页内容大于视窗，滚动条就会出现。

一般好多用给外层元素（比如body）加 overflow: hidden;overflow-x:hidden,overflow:hidden 来解决隐藏滚动条，此法可行。因为这种是手疼砍手，头疼砍头的办法，overflow：hidden，超出部分隐藏！网页内容不会大于视窗，滚动条自然不会出现，但此时页面也会变得无法卷动。这么鸡肋的做法自然不可取。

此时没有了滚动条，但也变得无法滚动

说几种种可取的办法

第一种办法

此种办法是overflow的扩展方法

我们在出现滚动条的元素外面再包一层div
然后确保该元素的宽比包含滚动条的元素小,或者说包含滚动条的元素宽要大于手动添加的div的宽大
再外层添加的div上使用 overflow:hidden，这个时候滚动条就消失了。
再给原来有滚动条的元素加上overflow-y: scroll;就可以保证垂直滚动，如需横向滚动加overflow-x:scroll

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}html {height: 100%;}body {width: 100%;height: 100%;overflow: hidden;}#container {height: 100%;background: pink;margin-right: -15px;overflow-y: scroll;}.d {width: 100%;height: 1000px;}</style>
</head><body><div id="container"><div class="d" style="background: skyblue;"></div><div class="d" style="background: rgb(235, 228, 135);"></div><div class="d" style="background: rgb(235, 135, 222);"></div></div>
</body></html>

第二种根本解决方法，但是兼容性不如第一种好

针对不同的浏览器，有不同的隐藏滚动条的方法，以下针对三大浏览器 chrome、ie（包括 edge）、firefox ：

Chorme

body::-webkit-scrollbar {display: none;
}

IE/Edge

body {-ms-overflow-style: none;
}

Firefox

firefox 是三者之中最麻烦的：

html {overflow: -moz-hidden-unscrollable; /*注意！若只打 hidden，chrome 的其它 hidden 会出问题*/height: 100%;
}body {height: 100%;width: calc(100vw + 18px); /*浏览器滚动条的长度大约是 18px*/overflow: auto;
}

综上所述解决办法:

html {overflow: -moz-hidden-unscrollable;height: 100%;
}body::-webkit-scrollbar {display: none;
}body {-ms-overflow-style: none;height: 100%;width: calc(100vw + 18px);overflow: auto;
}

方法参考:https://juejin.im/post/5a6046dbf265da3e253c3534 大佬

https://juejin.im/post/5de67659f265da33d645906f 大佬文章

有兴趣可以一读哈，如果你有更好的方案欢迎一起探讨，让更多小伙伴受益！

CSS隐藏浏览器滚动条相关推荐

不同浏览器CSS隐藏元素滚动条
CSS隐藏元素滚动条 Firefox浏览器对于Firefox,我们可以将滚动条宽度设置为none: scrollbar-width: none; /* Firefox */ IE浏览器对于IE,我 ...
html强制隐藏,html隐藏滚动条_css强制隐藏浏览器滚动条方法
摘要腾兴网为您分享:css强制隐藏浏览器滚动条方法,易视云3,闪电侠,平安知鸟,牛牛粤语等软件知识,以及mysql管理软件,手机录音剪辑软件,c4d,半梦视界,兔兔ios,微信阅读量软件,英雄联盟租 ...
使用CSS隐藏元素滚动条【兼容主流浏览器】
如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置 overflow:auto 样式即可.想要完全隐藏滚动条只需设置 overflow:hid ...
使用CSS隐藏元素滚动条
如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可.想要完全隐藏滚动条只需设置overflow:hidden ...
自定义浏览器css,CSS自定义浏览器滚动条样式
前言最近在使用Chrome浏览器访问QQ会员的官网时候发现网站的浏览器默认侧边滚动栏变成了如下图所示的样式,后来上网去查询了一下,然后得知该样式是可以通过CSS来设计的,于是就是自己捣鼓了一下. / ...
html滚动条样式自定义,CSS自定义浏览器滚动条样式
前言最近在使用Chrome浏览器访问QQ会员的官网时候发现网站的浏览器默认侧边滚动栏变成了如下图所示的样式,后来上网去查询了一下,然后得知该样式是可以通过CSS来设计的,于是就是自己捣鼓了一下. 该 ...
CSS 修改滚动条样式隐藏浏览器滚动条
/* 滚动条整体部分 */ div::-webkit-scrollbar {} /* 滚动条里面的滑块 */ div::-webkit-scrollbar-thumb {}/* 滚动条的轨道的两端按钮 ...
隐藏浏览器滚动条但内容可以滚动的3种解决方式（简单清晰）
第一种:使用纯css样式属性隐藏滚动条 :火狐浏览器的css写法不兼容 <!DOCTYPE html> <html lang="en"> <head ...
css 修改浏览器滚动条样式（火狐Firefox，谷歌google）
一.修改谷歌google: 修改样式: 1.全局修改,所有滚动条生效: ::-webkit-scrollbar{width:6px;height:6px; background-color: #000 ...