better-scroll

其方法、事件、属性等都可以去文档查找,做移动端的滑动非常好

1、使用better-scroll的基本条件
必须包含两个大的div,外层和内层div
外层div设置可视的大小(宽或者高)-有限制宽或高
内层div,包裹整个可以滚动的部分
内层div高度一定大于外层div的宽或高,才能滚动
2、基本使用
new BScroll(Dom元素)
//其中DOM元素就是外层的div,
//这里要注意的是,better-scroll 只处理容器(wrapper)的第一个子元素(content)的滚动,其它的元素都会被忽略。
小案例
竖向滚动
better-scroll 最常见的应用场景是列表滚动,我们来看一下它的 html 结构

<div class="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
</div>

/对外层div进行了高度上的限制/
.wrapper{
display: fixed;
left: 0;
top: 0;
bottom: 0;
width: 100%;
overflow:hidden;
}

上面的代码中 better-scroll 是作用在外层 wrapper 容器上的,滚动的部分是 content 元素。

import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容