火狐瀏覽器滾動條兼容問題

在日常開發中，我們經常會用到 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