全网最全滚动条隐藏CSS样式 亲测有效

1. 首先需要明确，滚动条是在哪层元素上有。父box？子box？

原理：父元素高度有限时，子元素溢出，父元素需要滚动条来支持子元素的完全展示。所以父盒子设置滚动条的样式，与子元素没有任何关系。

 2.所以在此基础上，父元素设置overflow：auto/scroll时，子元素溢出，则会显示出滚动条。

.father {
  height: 100%;  /* 父盒子有限高度 */
  overflow: auto; /* 溢出需要可滚动 */
  scrollbar-width: none; /* Firefox隐藏滚动条 */
  -ms-overflow-style: none; /* Internet Explorer 10+隐藏滚动条 */
  ::-webkit-scrollbar {
    width: 0;      /* Safari,Chrome 隐藏滚动条 */
    height: 0;     /* Safari,Chrome 隐藏滚动条 */
    display: none; /* 移动端、pad 上Safari，Chrome，隐藏滚动条 */
  }
}

滚动条样式在各大品牌的浏览器中有各自的样式来处理。

以上是隐藏所有浏览器滚动条的兼容性写法。

有用请支持下，给个小小的赞吧