本文主要和大家分享移动端弹性滑动以及vue记录滑动位置详解，希望能帮助到大家。
-webkit-overflow-scrolling介绍
<span style="font-size: 14px;">-webkit-overflow-scrolling: auto | touch;<br/></span>
<span style="font-size: 14px;">auto</span>： 普通滚动，当手指从触摸屏上移开，滚动立即停止<span style="font-size: 14px;">touch</span>：滚动回弹效果，当手指从触摸屏上移开，内容会保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
兼容写法
<span style="font-size: 14px;">over-flow: auto; /* winphone8和android4+ */<br/>-webkit-overflow-scrolling: touch; /* ios5+ */<br/></span>
如何使用
上代码：
<span style="font-size: 14px;"><p class="scrollContainer"><br/> <ul><br/> <li>1</li><br/> <li>2</li><br/> <li>3</li><br/> <li>4</li><br/> <li>5</li><br/> <li>6</li><br/> <li>7</li><br/> <li>8</li><br/> <li>9</li><br/> <li>10</li> <br/> </ul><br/></p><br/></span>
<span style="font-size: 14px;">.scrollContainer{<br/> width: 100px;<br/> height: 50px; <br/> -webkit-overflow-scrolling: touch;<br/> overflow-y: auto; <br/> overflow-x: hidden; <br/>}<br/>.scrollContainer>ul>li{<br/> height: 20px;<br/> width: 100%;<br/>}<br/></span>可能会出现的bug
父级元素
<span style="font-size: 14px;">scrollContainer</span>加上定位<span style="font-size: 14px;">position: absolute|relative</span>，滑动几次后可滚动区域会卡主，不能在滑动快速滑动页面会出现空白，滑动停止后内容才显示
此时，你应该给父级元素<span style="font-size: 14px;">scrollContainer</span>加上如下代码：
立即学习“前端免费学习笔记（深入）”；
<span style="font-size: 14px;">//解决第一个bug<br/>z-index:1; <br/><br/>//解决第二个bug<br/>-webkit-backface-visibility: hidden; <br/>-webkit-transform: translate3d(0,0,0);<br/></span>
需求
在vue项目中，我们可能会遇到这样的需求，例如：
商品列表页中，点击某一商品，进入到详情页。
从详情页中返回到商品列表页，页面应当显示的页面应当是之前的样子。
也就是说，滚动条的位置应该缓存下来；
思路
商品列表需要被缓存下来,页面的缓存方式请查看vue官方文档keep-alive来缓存页面，这样，在详情页面返回的时候，页面不至于重新加载。
在商品列表生命周期
<span style="font-size: 14px;">activated</span>中，监听当前<span style="font-size: 14px;">scrollContainer</span>父元素的滚动事件，滚动时的回调中，获取到<span style="font-size: 14px;">scrollTop</span>(滚动条距离滚动元素即<span style="font-size: 14px;">scrollContainer</span>的距离)的值，存入到以及在<span style="font-size: 14px;">deactivated</span>中移除掉当前滚动事件的监听。在商品列表中，点击进入详情页中的时候，将滚动条位置被缓存下来了，你可以放到
<span style="font-size: 14px;">sessionStorage|localStorage</span>中。当然，如果你使用了vuex，可以直接将值放入vuex中进行管理；从详情页中返回的时候，同时要做这样的操作，将你存入缓存中的
<span style="font-size: 14px;">scrollTop</span>值重新赋予给当前p的滚动条Ok，思路就是这样子，大功告成。
vue中具体实现
我是用的vuex进行管理的滚动条位置，实现代码如下：
<span style="font-size: 14px;"><p class="scrollContainer" ref="scroll"> //加了一个ref，用于获取当前dom <br/> <ul><br/> <li>1</li><br/> <li>2</li><br/> <li>3</li><br/> <li>4</li><br/> <li>5</li><br/> <li>6</li><br/> <li>7</li><br/> <li>8</li><br/> <li>9</li><br/> <li>10</li> <br/> </ul><br/></p><br/></span>
<span style="font-size: 14px;">computed:{<br/> ...mapGetters([<br/> "home_list_top" //vuex中的存放的滚动条的位置<br/> ])<br/>}<br/>...<br/>methods:{<br/> recordScrollPosition(e) {<br/> this.$store.dispatch("setHomeListTop",e.target.scrollTop); //实时存入到vuex中<br/> }<br/>}<br/>...<br/>activated(){ //滚动条位置的监听放到activated是因为此页面被keep-alive缓存了<br/> this.$refs.scroll.scrollTop = this.home_list_top; //this.$refs.scroll拿到滚动的dom，即scrollContainer，this.home_list_top是存入到vuex里的值<br/> this.$refs.scroll.addEventListener("scroll",this.recordScrollPosition); //添加绑定事件<br/>},<br/>deactivated(){ //keep-alive 的页面跳转时，移除scroll事件<br/> this.$refs.scroll.removeEventListener("scroll",this.recordScrollPosition); //清除绑定的scroll事件<br/>}<br/></span>相关推荐：
