先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