相关入口
文档查看说明
- 如果只是使用最基础的功能,可在快速上手中查找对应的配置 介绍指南 | BetterScroll 2.0
- 如果是需要使用进阶的功能,如监听滚动条滚动的位置等,需要在插件里面查找,快速上手内的信息不完整 插件 | BetterScroll 2.0
固定的HTML格式
PS:如果发现没有生效,1、检查HTML格式是否正确;2、检查css是否有设置高度;3、检查js选择器名是否设置不正确。
<div class="scroll-wrapper">
<div class="scroll-content"></div>
</div>
<!-- scroll-wrapper 限制需要做滚动内容的显示区域 -->
<!-- scroll-content 放需要做滚动的内容 -->
特殊说明-属性
pullUpLoad 属性
- 内容如果是动态插入的情况下,即使内容没有超出显示区域,滚动条仍然会显示,不会隐藏
特殊说明-事件
scroll
- 常规设置无法触发,需加上probeType才可以触发scroll的事件回调,有三个值,具体使用说明看:配置项 | BetterScroll 2.0
常用配置
observeDOM:true/false,开启/关闭监听滚动区域内内容是否动态插入
mouseWheel:true/false,开启/关闭鼠标滚轮查看内容功能
bounce:true/false,开启/关闭滚动条的缓动效果
preventDefault:true/false,开启/关闭阻止内容点击
scrollbar:true/false,开启/关闭滚动条样式 具体配置说明
eventPassthrough:'vertical'/'horizontal',保留原生方向的滚动 具体说明
scrollX/scrollY:true/false,开启关闭 横、竖 向滚动