火狐浏览器滚动条兼容问题

在日常开发中，我们经常会用到 overflow: scroll; 

但浏览器自带的默认滚动条很难看，因此我们会需要美化它

方法一：自定义美化

谷歌 chrome 浏览器美化滚动条方法：（网上有很多种美化方法，此为一种）

.scrollbar {
    overflow: auto;
    float: left;
    border: none;
}

.scrollbar::-webkit-scrollbar {
    display: block;  /* 显示隐藏滚动条 */
    width: 5px;  /* 高宽分别对应横竖滚动条的尺寸 */
    height: 1px;
}

.scrollbar::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 50px;
    -webkit-box-shadow: inset 0 0 5px #18223E;
    background: #535353;
}

.scrollbar::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 50px;
    -webkit-box-shadow: inset 0 0 5px #101728;
    background: #EDEDED;
}

注：如果不想要滚动条，可以设置属性 

.scrollbar::-webkit-scrollbar {
    display: none;  /* 隐藏滚动条 */
}

 

火狐浏览器美化滚动条方法：可以尝试设置以下参数

.scrollbar {
    scrollbar-3d-light-color: initial; /*设置或检索滚动条亮边框颜色*/

    scrollbar-highlight-color: initial; /*设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色*/

    scrollbar-face-color: initial; /*设置或检索滚动条3D表面（ThreedFace）的颜色*/

    scrollbar-arrow-color: initial; /*设置或检索滚动条方向箭头的颜色*/

    scrollbar-shadow-color: initial; /*设置或检索滚动条3D界面的暗边（ThreedShadow）颜色*/

    scrollbar-dark-shadow-color: initial; /*设置或检索滚动条暗边框（ThreedDarkShadow）颜色*/

    scrollbar-base-color: initial; /*设置或检索滚动条基准颜色。其它界面颜色将据此自动调整*/
}

注：如果不想要滚动条，可以设置属性 scrollbar-width: none;

 

方法二：插件美化

以下为jquery.nicescroll官网：
https://nicescroll.areaaperta.com/how-to-use/

引入 jquery 和  jquery.nicescroll

npm install jquery
npm install jquery.nicescroll

使用

$("body").niceScroll();

$("body").niceScroll({
  cursorcolor:"aquamarine",
  cursorwidth:"16px"
});v

在某些情况下，当您从其他库（如jquery UI，无限滚动等）中按大小调整/隐藏/显示内容添加nicescroll时，您需要在内容更改或div修改/隐藏/显示时通知nicescroll。 

$("scrolldiv>").getNiceScroll().resize();

 

niceScroll 使用指南：

https://www.hangge.com/blog/cache/detail_1931.html

https://www.cnblogs.com/duanzhenzhen/p/11125109.html