better-scroll 移动端滚动

简介

better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。

无法滚动问题

better-scroll 只处理绑定容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。

better-scroll 1.x

安装

npm install better-scroll --save

import BScroll from 'better-scroll'

起步

• content如果高度大于浏览器的高度,浏览器会添加默认的滚动效果.
• wrapper添加overflow: hidden; height: xxxpx;样式将content超过wrapper高度的内容隐藏掉.

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

import BScroll from 'better-scroll'

let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)

// 当传入一个字符串时,better-scroll 内部会尝试调用 querySelector 去获取这个 DOM 对象
let scroll = new BScroll('.wrapper')

注意:better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。

配置参数

better-scroll 支持很多参数配置，可以在初始化的时候传入第二个参数，比如：实现一个纵向可点击的滚动效果

let scroll = new BScroll('.wrapper',{
    scrollY: true,
    click: true
})

better-scroll 支持的参数非常多，可以修改它们去实现更多的 feature(功能)。有些参数better-scroll 已经为你实现了最佳效果可以不进行修改