移动端 better-scroll基础

一、什么是better-scroll

better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件

#滚动原理

1. 与浏览器滚动原理一致，父容器高度固定，子元素内容撑开，必须产生滚动条，才能滚动。
2. better-scroll只处理容器（wrapper）的第一个子元素（content）的滚动

 

#二、如何使用

1.加载插件

2.HTML内容

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
</div>

 

3.初始化调用BScroll

 var BScroll = new BScroll('.wrapper',{});

 

#三、better-scroll常见属性

#scrollX

类型：Boolean
默认值: false
作用：当设置为 true 的时候，可以开启横向滚动。

 

#scrollY

类型：Boolean
默认值：true
作用：当设置为 true 的时候，可以开启纵向滚动

 

#probeType

类型: Number
默认值:0
作用:
1  滚动一段时间后在去派发scroll事件
2  只要滚动会实时的派发scroll事件
3  不仅在滚动实时的派发scroll事件，并且在滚动动画的时候也会派发scroll事件

 

#四、better-scroll常见方法

#bs.refresh()

重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常

 

#bs.scrollToElement(el, time, offsetX, offsetY, easing)

参数：
{DOM | String} el 滚动到的目标元素, 如果是字符串，则内部会尝试调用 querySelector 转换成 DOM 对象。
{Number} time 滚动动画执行的时长（单位 ms）
{Number | Boolean} offsetX 相对于目标元素的横轴偏移量，如果设置为 true，则滚到目标元素的中心位置
{Number | Boolean} offsetY 相对于目标元素的纵轴偏移量，如果设置为 true，则滚到目标元素的中心位置
返回值：无
作用：滚动到指定的目标元素。

 

#bs.on();

 bs.on("scroll",function(){
    console.log(this.y);//滚动的距离  下拉是正值(拉的距离越大值越大)  上拉是负值
    this.maxScrollY//最大的滚动距离
})