better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
①DOM层级
<div class="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
</div>
better-scroll 是作用在外层 wrapper 容器上的,滚动的部分是 content 元素。这里要注意的是,better-scroll 只处理容器(wrapper)的第一个子元素(content)的滚动,其它的子元素都会被忽略。
代码初始化方式为:
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)
②滚动原理
content层(子级)的高度必须大于wrapper层(父级)的高度,才会产生滚动效果(同浏览器默认的滚动效果一样)。
例:wrapper层高度设为100%,那么content层的高度最少为101%,才会产生上拉下滑的滚动效果