better-scroll学习笔记

better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

①DOM层级



  • ...

  • ...

  • ...



better-scroll 是作用在外层 wrapper 容器上的,滚动的部分是 content 元素。这里要注意的是,better-scroll 只处理容器(wrapper)的第一个子元素(content)的滚动,其它的子元素都会被忽略。

代码初始化方式为:
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)

②滚动原理
content层(子级)的高度必须大于wrapper层(父级)的高度,才会产生滚动效果(同浏览器默认的滚动效果一样)。
例:wrapper层高度设为100%,那么content层的高度最少为101%,才会产生上拉下滑的滚动效果

你可能感兴趣的:(better-scroll学习笔记)