切版网（2013~2023）

http://qieban.cn
做完设计，找切版网
QQ:6135833
微信：dingxiangming82

2021年12月13日

滚动条美化插件mCustomScrollbar参数大全

标签：mCustomScrollbar, 滚动条美化

本文就“滚动条美化插件mCustomScrollbar参数大全”展开讨论，作者切版网，发布于2021年12月13日 全文共2665个字，预计阅读时长8分53秒。

切版网（qieban.cn）专注web前端开发，关于滚动条美化插件能够说得上来好几种，但是综合下来还是比较推荐mCustomScrollbar这一款，因为它强大，美化支持度高，扩展性好，附滚动条美化插件mCustomScrollbar参数大全

setWidth: false //设置你内容的宽度 值可以是像素值或者百分比(string),取值300,”30%”
setHeight: false //设置你内容的高度 值可以是像素值或者百分比(string),取值300,”30%”
setTop: 0 //设置一开始纵向滚动的位置,取值”100px”,值为字符串
setLeft: 0 //设置一开始横向滚动的位置,取值”100px”,值为字符串
axis: “string” //”x”,”y”,值为字符串，分别对应横纵向滚动
scrollInertia:Integer //滚动的惯性值 在毫秒中 使用0可以无滚动惯性 (滚动惯性可以使区块滚动更加平滑)
scrollbarPosition: “string” //取值”inside”,”outside”,值为字符串,父元素必须是relative定位，滚动条出在元素的内部(inside)或者外部(outside);
autoDraggerLength:Boolean： //根据内容区域自动调整滚动条拖块的长度 值:true,false
alwaysShowScrollbar:Integer //保持滚动条的显示，取值0,1(保持滚动块可见),2(保持滚动条所有的显示)
mouseWheel:{
enable: boolean //启用或禁用通过鼠标滚轮滚动内容。
scrollAmount: Integer //滚轮滚动的像素
invert: boolean //反转滚动方向
}

scrollButtons:{ enable:Boolean } //是否添加 滚动条两端按钮支持 值:true,false
scrollButtons:{ scrollType:String } //滚动按钮滚动类型 值:”continuous”(当你点击滚动控制按钮时断断续续滚动) “pixels”(根据每次点击的像素数来滚动) 点击这里可以看到形象的例子
scrollButtons:{ scrollSpeed:Integer } //设置点击滚动按钮时候的滚动速度(默认 20) 设置一个更高的数值可以更快的滚动
scrollButtons:{ scrollAmount:Integer } //设置点击滚动按钮时候每次滚动的数值 像素单位 默认 40像素

advanced:{ updateOnBrowserResize:Boolean } //根据百分比为自适应布局 调整浏览器上滚动条的大小 值:true,false 设置 false 如果你的内容块已经被固定大小
advanced:{ updateOnContentResize:Boolean } //自动根据动态变换的内容调整滚动条的大小 值:true,false 设置成 true 将会不断的检查内容的长度并且据此改变滚动条大小 建议除非必要不要设置成 true 如果页面中有很多滚动条的时候 它有可能会产生额外的移出 你可以使用 update 方法来替代这个功能
advanced:{ autoExpandHorizontalScroll:Boolean } //自动扩大水平滚动条的长度 值:true,false 设置 true 你可以根据内容的动态变化自动调整大小 可以看Demo
advanced:{ autoScrollOnFocus:Boolean } //是否自动滚动到聚焦中的对象 例如表单使用类似TAB键那样跳转焦点 值:true false

callbacks:{ onScrollStart:function(){} } //使用自定义的回调函数在滚动时间开始的时候执行 具体请看Demo
callbacks:{ onScroll:function(){} } //自定义回调函数在滚动中执行 Demo 同上
callbacks:{ onTotalScroll:function(){} } //当滚动到底部的时候调用这个自定义回调函数 Demo 同上
callbacks:{ onTotalScrollBack:function(){} } //当滚动到顶部的时候调用这个自定义回调函数 Demo 同上
callbacks:{ onTotalScrollOffset:Integer } //设置到达顶部或者底部的偏移量 像素单位
callbacks:{ whileScrolling:function(){} } //当用户正在滚动的时候执行这个自定义回调函数
callbacks:{ whileScrollingInterval:Integer } //设置调用 whileScrolling 回调函数的时间间隔 毫秒单位
(function($){ $(document).ready(function(){ $(“#content”).mCustomScrollbar({ setWidth: false, setHeight: false, setTop: 0, setLeft: 0, axis: “y”, scrollInertia:0, scrollbarPosition: “inside”, autoDraggerLength:false autoExpandScrollbar:true alwaysShowScrollbar:2 mouseWheel:{ enable:true scrollAmount:10 preventDefault:true invert:true }, scrollButtons:{ enable:false, scrollType:”continuous”, scrollSpeed:20, scrollAmount:40 }, advanced:{ updateOnBrowserResize:true, updateOnContentResize:false, autoExpandHorizontalScroll:false, autoScrollOnFocus:true }, callbacks:{ onScrollStart:function(){}, onScroll:function(){}, onTotalScroll:function(){}, onTotalScrollBack:function(){}, onTotalScrollOffset:0, whileScrolling:false, whileScrollingInterval:30 } }); }); })(jQuery);

文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。