背景
为博客园做移动端适配,有一个控件需要固定大小,但是里面的内容是动态的,很有可能放不下,因此需要滑动。
设置了滑动后,我发现划不动,原来原生的滑动是不管你什么移动端的,于是找移动端适配的滑动。
Better-Scroll
名声很大,坑不少。
划不动
官方文档写的快速开始实在是太过于简短了,以至于让人踩了不少坑。
- 开门见山,首先wrapper需要设置overflow:hidden。
- wrapper里面需要且只能有一个content元素。
- 创建BScroll对象前,content元素的高度需要大于wrapper。
2,3这两个坑我踩了个遍。
渲染之后才有的高度,因此很多时候创建BScroll对象时,wrapper和content的高度都是undefined。
可以在dom解析完毕后再执行。
$(document).ready(()=>{let wrapper = document.querySelector('.bottom-menu .drawer')if(!wrapper) return;window.bs = BetterScroll.createBScroll(wrapper,{click: true})})