2019-07-30 滑动插件（iScroll、better-scroll）

iScroll

1、iScroll在每一个滑动区域都需要初始化，且在每一个页面没有数量限制。
2、使DOM尽可能的简单，硬件的处理能力有限。
3、iScroll必须被应用在滑动区域的wrapper元素上，只有第一个子元素会被滚动，其他的子元素会被忽略。
4、box-shadow，opacity，text-shadow和alpha channels都是与硬件加速无法很好结合的属性。用背景图来代替阴影效果效果会更好。
5、iScroll采用querySelector，因此只有第一个元素会被选中，如果想要选取多个对象，需要使用循环。
6、当DOM准备就绪时，需要初始化iScroll。最安全的选择是在window onload事件上初始化它。 DOMContentLoaded或内联初始化也很好但请记住这需要知道滚动区域的高度/宽度。如果图像没有明确的宽度/高度声明，则iScroll很可能最终会出现错误的滚动条大小。
7、给滑动的容器添加position: relative或者absolute，通常可以解决错误计算wrapper大小的问题。
8、如果DOM比较复杂，最好给iScroll初始化的onload事件添加延迟，100-200ms的延迟会让浏览器得到休息。
9、iScroll可以在初始化阶段通过第二个参数进行配置。
var myScroll = new IScroll('#wrapper', {
mouseWheel: true,
scrollbars: true
});

better-scroll

1、better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iScroll 的实现，它的 API 设计基本兼容 iScroll，在 iScroll 的基础上又扩展了一些 feature 以及做了一些性能优化。better-scroll 是基于原生 JS 实现的，不依赖任何框架。

2、滚动原理：
浏览器的滚动原理： 当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。

better-scroll 也是一样的原理。wrapper（即父容器）会有固定的高度，content（即第一个子元素），高度会随着内容的大小而撑高那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动子元素了。