Better-scroll巨坑！！！
better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
better-scroll 是基于原生 JS 实现的，不依赖任何框架，所以使用起来也十分的方便。它编译后的代码大小是 63kb，压缩后是 35kb，是一款非常轻量的 JS lib。
划重点：
- 使用时better-scroll是作用在外层的wrapper容器上的，滚动的部分是content—需要注意的是，better-scroll只处理容器的第一个子元素，其他的元素会被忽略，如果里面需要滚动的部分有好几部分。一定要拿一个元素把他包裹起来
- 还有就是better-scroll初始化了，但是没法滚动。大家知道浏览器滚动的原理是页面的高度超过视口高度的时候，才会出现滚动条。也就是说父容器一定要有一个固定的高度并且溢出隐藏，子容器的高度要大于父元素的高度，才能滚动
- 滚动的原理
1 element.style { 2 transition-duration: 0ms; 3 transform: translate(0px, 0px) scale(1) translateZ(0px); 4 transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); 5 }
通过滑动的距离动态改变translate的值来实现，让它相对于父级移动，就有了一种滚动的效果，但是这里就又有了下一个坑
- 滚动元素里面的某一块元素的position：fixed失效,本来我们想实现一个效果是滚动到某一高度让它有个吸顶效果，但是它死活吸不上去，实验了几次后发现它的fixed是相对于它的父容器定位的—（我想到的解决办法是实时改变这个元素的top值，但是感觉不太流畅但是有效果）
fixed定位的元素，如果父级有transform样式，值不为none，那么fixed定位就会失效，scale(),rotate()都会使fixed定位失效。
解决方法：使用transform样式的元素，不要包含fixed定位的子元素；css3的新属性：flex;很好的解决了在transform下fixed失效的问题；也可以添加类和移除类
- 使用下拉加载的时候，一定不能把包裹子元素的容器重新渲染，这样滚动事件就会失效，因为你第一次初始化时给这个容器写上样式了，如果重新渲染的时候这些样式就会被覆盖，没有样式就不会滚动了，除非你再初始化一下这个容器，但是太麻烦不建议这样使用
- 当 DOM 结构发生变化的时候务必要调用refresh()确保滚动的效果正常，重新渲染高度
版权声明：本文为quanquanchacha原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。