浏览器 滚动条 修改样式隐藏滚动条

处理浏览器默认的滚动条

设置滚动条

// 设置滚动条 达到出现标准才出现
.scroll {
    height:300px;
    width:70px;
    overflow:auto;
}
// 宽度(width)和高度(height)可以根据实际需要来设定。
// 以上实例表示如果 div 内容的高度大于 300px 就会出现垂直滚动条，小于 // 300px 就没有滚动条。如果宽度大于 70px 会出现水平滚动条，小于就没有。


// 设置滚动条  一直有
.scroll {
    overflow:scroll;
    height:300px;
    width:200px;
    background:#EEEEEE;
}

只设置水平滚动条：

<div style="width:100px;overflow-x:auto"></div>

只设置垂直滚动条：

<div style="height:300px;overflow-y:auto"></div>

水平与垂直都设置：

<div style="width:70px;height:300px;overflow-x:auto;overflow-y:auto"></div>

隐藏滚动条

// 针对所有的盒子 
::-webkit-scrollbar {
  display: none;
}

// 针对某个盒子 浏览器滚动条
.aside-menu::-webkit-scrollbar {
  display: none;
}



//  隐藏纵向显示横向
.box{
    overflow:-Scroll;
    overflow-y:hidden;
}
 

设置滚动条样式

::-webkit-scrollbar {
  // background-color: #b46868;
  width: 5px;
}

::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 5px;
} /* 滚动条的滑轨背景颜色 */

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2); 
  border-radius: 5px;
} /* 滑块颜色 */

::-webkit-scrollbar-button {
  height: 0;
  background-color: #7c2929;
} /* 滑轨两头的监听按钮颜色 */

::-webkit-scrollbar-corner {
  background-color: black;

} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */

最后

ie的兼容自己处理吧

有好的方案的同学可以跟我分享一下