better-scroll 是一款重點解決移動端(已支持 PC)各種滾動場景需求的插件眨唬。它的核心是借鑒的 iscroll 的實現(xiàn)呀舔,它的 API 設(shè)計基本兼容 iscroll特碳,在 iscroll 的基礎(chǔ)上又擴展了一些 feature 以及做了一些性能優(yōu)化蹋岩。
①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層(父級)的高度峦朗,才會產(chǎn)生滾動效果(同瀏覽器默認的滾動效果一樣)。
例:wrapper層高度設(shè)為100%排龄,那么content層的高度最少為101%波势,才會產(chǎn)生上拉下滑的滾動效果