移动端弹性滑动以及vue记录滑动位置

-webkit-overflow-scrolling介绍

```
-webkit-overflow-scrolling: auto | touch;
```
auto：普通滚动，当手指从触摸屏上移开，滚动立即停止
touch：滚动回弹效果，当手指从触摸屏上移开，内容会保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

兼容写法

```
over-flow: auto; /* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */
```

如何使用

上代码：
```

```
```
.scrollContainer{
width: 100px;
height: 50px;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
overflow-x: hidden;
}
.scrollContainer>ul>li{
height: 20px;
width: 100%;
}
```

可能会出现的bug

1.父级元素scrollContainer加上定位position: absolute|relative，滑动几次后可滚动区域会卡主，不能在滑动
2.快速滑动页面会出现空白，滑动停止后内容才显示
此时，你应该给父级元素scrollContainer加上如下代码：
```
//解决第一个bug
z-index:1;

//解决第二个bug

-webkit-backface-visibility: hidden;

-webkit-transform: translate3d(0,0,0);



<h2>需求</h2>

在vue项目中，我们可能会遇到这样的需求，例如：

商品列表页中，点击某一商品，进入到详情页。

从详情页中返回到商品列表页，页面应当显示的页面应当是之前的样子。

也就是说，滚动条的位置应该缓存下来；

<h2>思路</h2>

&nbsp;&nbsp;&nbsp;&nbsp;1.商品列表需要被缓存下来,页面的缓存方式请查看vue官方文档keep-alive来缓存页面，这样，在详情页面返回的时候，页面不至于重新加载。

&nbsp;&nbsp;&nbsp;&nbsp;2.在商品列表生命周期activated中，监听当前scrollContainer父元素的滚动事件，滚动时的回调中，获取到scrollTop(滚动条距离滚动元素即scrollContainer的距离)的值，存入到以及在deactivated中移除掉当前滚动事件的监听。

&nbsp;&nbsp;&nbsp;&nbsp;3.在商品列表中，点击进入详情页中的时候，将滚动条位置被缓存下来了，你可以放到sessionStorage|localStorage中。当然，如果你使用了vuex，可以直接将值放入vuex中进行管理；

&nbsp;&nbsp;&nbsp;&nbsp;4.从详情页中返回的时候，同时要做这样的操作，将你存入缓存中的scrollTop值重新赋予给当前div的滚动条

&nbsp;&nbsp;&nbsp;&nbsp;5.Ok，思路就是这样子，大功告成。

<h2>vue中具体实现</h2>

我是用的vuex进行管理的滚动条位置，实现代码如下：

//加了一个ref，用于获取当前dom

```
```
computed:{
...mapGetters([
"home_list_top" //vuex中的存放的滚动条的位置
])
}
...
methods:{
recordScrollPosition(e) {
this.$store.dispatch("setHomeListTop",e.target.scrollTop); //实时存入到vuex中
}
}
...
activated(){ //滚动条位置的监听放到activated是因为此页面被keep-alive缓存了
this.$refs.scroll.scrollTop = this.home_list_top; //this.$refs.scroll拿到滚动的dom，即scrollContainer，this.home_list_top是存入到vuex里的值
this.$refs.scroll.addEventListener("scroll",this.recordScrollPosition); //添加绑定事件
},
deactivated(){ //keep-alive 的页面跳转时，移除scroll事件
this.$refs.scroll.removeEventListener("scroll",this.recordScrollPosition); //清除绑定的scroll事件
}
```

后话

如果有更好的办法，互相交流。