Vue.js手机端scroll事件的坑

延续之前的Vue.js的手机端开发，在滚动事件的时候遇到了很多问题，纪录下来，有的问题已经解决，有的留个坑，以后慢慢填～

主要包括

iOS滚动混用

  几个都有滚动的页面，在一个页面的滚动位置在链接到下一个页面的时候，新页面的滚动位置会被置为上一个页面的滚动位置。

iOS滚动页下面出现大面积空白

  当列表页进入到一个较长的详情页面时，详情页下拉到底部，看完之后返回时，列表页为空，内容移上去了，需要滑下来才能看到内容

iOS设置scrollTop无效

  希望通过设置scrollTop的方式，再次回到页面的时候还原之前滚动的位置，但是在iOS设备上，设置无效 

scrollTop的值大于特定值之后，再设置的话为固定值

  同上，希望纪录滚动位置，但是当列表页加载了多页的时候，scrollTop的值很大，进到详情页查看完毕再回到列表页的时候，滚动到的位置是固定的一个值，不是之前纪录的滚动位置。

scrollTop取值不兼容

  Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。一个元素的 scrollTop 是可以去计算出这个元素最高高度距离它容器顶部的可见高度。当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0。但是想取到一个元素的scrollTop的时候，却不是兼容的。

setTimeout引起的卡顿

  设置scrollTop的时候放在setTimeout里的时候，可以避免浏览器自身对scrollTop的设置，但是导致的后果有1）返回到列表页到回到之前纪录的位置会有一定的延迟，当用户已有其他的操作的时候会有明显的卡顿；2）网络加载的数据较慢时，设置的setTimeout里的延迟还是不够，还是受浏览器自身对scrollTop设置的影响。

滚动区域滚动不顺滑

  在手机上测试的时候，iOS上滚动很不顺滑

滚动事件和点击事件重叠

使用mint ui的 Loadmore  组件来实现下拉加载更多的时候，在下拉的过程中会进入到详情页

滚动元素不能下拉加载

设置了scroll的父元素的样式为outer，子元素的样式为inner之后，发现元素不能下拉加载下一页了

.outer { 

  overflow:scroll;

 -webkit-overflow-scrolling 
 }

.inner {

 height: calc(100% + 1px);

}

－－－－－－2017.11.6日更－－－－－－－－

以上就是遇到的坑，之后会出一系列合辑，针对每个问题的解决方案进行整理。

参考文献

[1] https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop

[2] http://mint-ui.github.io/docs/#/en2/loadmore