<span style="font-size: 14px;">-webkit-overflow-scrolling: auto | touch;<br></span>
<span style="font-size: 14px;">auto</span>##： 普通滾動，當手指從觸控螢幕移開，滾動立即停止touch<span style="font-size: 14px;"></span>：滾動回彈效果，當手指從觸控螢幕移開，內容會保持一段時間的滾動效果，繼續滾動的速度和持續的時間和滾動手勢的強度成正比。同時也會建立一個新的堆疊上下文。 <span style="font-size: 14px;"></span>
<span style="font-size: 14px;">over-flow: auto; /* winphone8和android4+ */<br>-webkit-overflow-scrolling: touch; /* ios5+ */<br></span>
上程式碼：<span style="font-size: 14px;"></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>#父級元素<span style="font-size: 14px;"></span>##scrollContainer<span style="font-size: 14px;"></span>#加上定位<span style="font-size: 14px;"></span>position: absolute|relative<span style="font-size: 14px;"></span>#，滑動幾次後可捲動區域會卡主，不能在滑動<span style="font-size: 14px;"></span>
<span style="font-size: 14px;"></span>
<span style="font-size: 14px;"></span>scrollContainer<span style="font-size: 14px;"></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>
<span style="font-size: 14px;"></span>
商品清單頁中，點選某一商品，進入到詳情頁。<span style="font-size: 14px;"></span>
從詳情頁回到商品清單頁，頁面應顯示的頁面應是先前的樣子。<span style="font-size: 14px;"></span>
也就是說，捲軸的位置應該要快取下來；<span style="font-size: 14px;"></span>
<span style="font-size: 14px;"></span>
<span style="font-size: 14px;"></span><span style="font-size: 14px;"></span><span style="font-size: 14px;"></span><span style="font-size: 14px;">商品清單需要被快取下來,頁面的快取方式請查看vue官方文件keep-alive來快取頁面，這樣，在詳情頁面返回的時候，頁面不至於重新載入。 </span><span style="font-size: 14px;"></span><span style="font-size: 14px;">在商品清單生命週期</span>activated<span style="font-size: 14px;">中，監聽目前</span>scrollContainer<span style="font-size: 14px;">父元素的捲動事件，捲動時的回呼中，取得到</span>scrollTop
scrollContainer<span style="font-size: 14px;"></span>的距離)的值，存入以及在<span style="font-size: 14px;"></span>##deactivated #中移除掉目前捲動事件的監聽。
<span style="font-size: 14px;"></span>在商品清單中，點擊進入詳情頁中的時候，將滾動條位置被緩存下來了，你可以放到<span style="font-size: 14px;"> </span>sessionStorage|localStorage<span style="font-size: 14px;"></span>中。當然，如果你使用了vuex，可以直接將值放入vuex中進行管理；
<span style="font-size: 14px;"></span>#從詳情頁中返回的時候，同時要做這樣的操作，將你存入快取中的
<span style="font-size: 14px;"></span>
Ok，思路就是這樣子，大功告成。
<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>以上是移動端彈性滑動以及vue記錄滑動位置詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
