IE、Chrome、Firefox浏览器隐藏滚动条（IE、火狐、谷歌浏览器）

系列文章目录

---

---

一、背景和效果图如下：

1.背景

场景：开发过程中遇到，在同一个弹窗中，分两栏可以滚动，如果两个添加了overflow-y:scroll 就会出现超级难看的一个效果如下的效果

！！！！！！所以这里想要去消除滚动条！！！！！！！

2.设置属性前效果图：

2.设置后效果图：

---

提示：以下是本篇文章正文内容，下面案例可供参考

二、直接通过CSS修改样式，保存滑动功能

1.全局设置滚动条如下（谷歌Chrome）

Css代码如下

这里使用的是scroll的伪元素 解决了scroll的样式问题，并且可以消除滚动条的样式

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

效果图如下

2.给某一个元素设置如下（谷歌Chrome）

Css代码如下

这里就相当于给类名为box的元素盒子去除scroll的样式

 .box::-webkit-scrollbar {
            display: none;
  }

效果图如下

三、这里其他浏览器的方法

1、通过padding将scroll移出视图（感兴趣可以自己去查一下，个人感觉没必要了解）

1.IE去除滚动条样式（IE10以上内核）

// IE10版本以上的
.scroll_content{
	-ms-scroll-chaining: chained;
	-ms-overflow-style: none;
	-ms-content-zooming: zoom;
	-ms-scroll-rails: none;
	-ms-content-zoom-limit-min: 100%;
	-ms-content-zoom-limit-max: 500%;
	-ms-scroll-snap-type: proximity;
	-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
	-ms-overflow-style: none;
	overflow: auto;
}

2.火狐除滚动条样式（Gecko 内核）

 /* Firefox */
 //除了该属性，该有一个 scrollbar-color 感兴趣可以自己了解一下
scrollbar-width: none;

---

总结

文章如果有不完整，或者错误的地方，都可以留言指正，虚心向大家请教！！1

希望文章可以帮助大家解决问题，同时也希望大家有问题，可以私信我，有时间都会回复大家的！！！！！！大家一起加油💪💪💪💪