自定義火狐瀏覽器滾動條樣式及niceScroll插件使用

先po各主流瀏覽器滾動條樣式修改參考鏈接,因爲以下鏈接實現了非火狐瀏覽器滾動條樣式修改,對火狐和IE的滾動條則選擇隱藏。

https://www.cnblogs.com/liuyanxia/p/8675752.html

https://blog.csdn.net/qq_26169011/article/details/82771774

並不滿足用戶需求。用戶主火狐瀏覽器。試了js模擬滾動條方案,流暢度未達標,最終決定使用niceScroll.js插件實現。

$(".canvasdiv").getNiceScroll().show().resize();
$(".canvasdiv").niceScroll(".scroll-item", {
        cursorcolor: "#618fcb",
        touchbehavior: true,
        cursorborder: "none",
        cursorwidth: "30px",
        boxzoom: true,
        autohidemode: false,
        zindex: 99,
        cursordragontouch: true,
        cursorborderradius: "8px",
        scrollspeed: 60
});

 徹底移除滾動條以便重新調用新的滾動條,用於多次控制滾動條顯示/隱藏,常與resize()方法連用。

$(".canvasdiv").getNiceScroll().remove();

niceScroll使用指南:

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

https://github.com/inuyaksa/jquery.nicescroll

https://nicescroll.areaaperta.com/how-to-use/

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章