【JQuery】HTML自定义滚动条（mCustomScrollbar）

实现效果如下所示

//scrollType:"continuous",//点击滚动是否有停顿效果scrollType:"pixels",//点击滚动是否有停顿效果scrollSpeed:20, //点击移动的速度scrollAmount:100 //点击滚动按钮移动的距离},set_height:"300px",//设置可见内容的宽度theme:"light-thick",//以下是主题//theme:"rounded-dots",//theme:"dark-thin",//theme:"light-3",//theme:"3d-thick",//theme:"3d",//theme:"rounded-dark",autoDraggerLength: true,//根据内容区域自动调整滚动条拖块的长度 值:true,falsemouseWheelPixels: 100,//滚动一下移动的距离autoHideScrollbar:true,//是否自动隐藏滚动条callbacks: {onScrollStart: function() {// $(&＃39;body&＃39;).append(&＃39;滚动开始//&＃39;);},onScroll: function() {//$(&＃39;body&＃39;).append(&＃39;滚动结束//&＃39;);},onTotalScroll: function() {//$(&＃39;body&＃39;).append(&＃39;滚动至底部//&＃39;);var data &＃61; &＃39;

&＃39;;$(".spinner").remove();//移除加载图标$("#content .mCSB_container").append(data);//追加新内容if(flag){//如果flag为true&＃xff0c;则追加加载图标。$(&＃39;#content .mCSB_container&＃39;).append(&＃39;

&＃39;);}$("#content").mCustomScrollbar("update"); //update scrollbar according to newly appended content},onTotalScrollBack: function() {// $(&＃39;body&＃39;).append(&＃39;滚动至顶部//&＃39;);},whileScrolling: function() {// $(&＃39;body&＃39;).append(&＃39;...滚动中...//&＃39;);$(".scroll-pct").html("当前位置:"&＃43;mcs.topPct&＃43;"%");if(mcs.topPct>&＃61;90){//}},},});});})(jQuery);script>
body>
html>

具体参数列表&＃xff1a;

https://github.com/diligentyang/mCustomScrollbar/tree/master/example