betterscroll制作竖屏直播弹幕

更新时间：2021-05-01 01:12:18

更新说明：better-scroll-cdn链接出问题，所有js换为本地文件

---

更新时间：2020-05-05 22:39:33

better-scroll 

better-scroll 提供了很多灵活的 API，当我们基于 better-scroll 去实现一些 feature 的时候，会用到这些 API，了解他们会有助于开发更加复杂的需求。

---

学习使用 better-scroll 最好的方式是看它的 demo 代码，我们把代码都放在了 example 目录。由于目前最适合移动端开发的前端 mvvm 框架是 Vue，并且 better-scroll 可以很好的和 Vue 配合使用的，所以 demo 我都用 Vue 进行了重写。

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

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

最简单的初始化代码如下：

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

better-scroll 提供了一个类，实例化的第一个参数是一个原生的 DOM 对象。当然，如果传递的是一个字符串，better-scroll 内部会尝试调用 querySelector 去获取这个 DOM 对象，所以初始化代码也可以是这样：

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

PREVIOUS:
NEXT:
模仿桌面系统(原创)
Swiper轮播图