当前位置: 首页 > 工具软件 > BetterScroll > 使用案例 >

BetterScroll 使用

公孙阳羽
2023-12-01

相关入口 

官网:BetterScroll 2.0

GitHub - better-scroll

文档查看说明 

  • 如果只是使用最基础的功能,可在快速上手中查找对应的配置     介绍指南 | 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 

常用配置

observeDOMtrue/false,开启/关闭监听滚动区域内内容是否动态插入

mouseWheeltrue/false,开启/关闭鼠标滚轮查看内容功能

bouncetrue/false,开启/关闭滚动条的缓动效果

preventDefaulttrue/false,开启/关闭阻止内容点击

scrollbartrue/false,开启/关闭滚动条样式 具体配置说明

eventPassthrough'vertical'/'horizontal',保留原生方向的滚动 具体说明

scrollX/scrollYtrue/false,开启关闭 横、竖 向滚动

 类似资料: