移動端彈性滑動以及vue記錄滑動位置詳解

本文主要和大家分享行動端彈性滑動以及vue記錄滑動位置詳解，希望能幫助大家。

-webkit-overflow-scrolling介紹

#

<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;"></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;"></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;"></span>

1. #父級元素<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>

2. 快速滑動頁面會出現空白，滑動停止後內容才顯示

   <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>

在vue專案中，我們可能會遇到這樣的需求，例如：

<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>

1. <span style="font-size: 14px;"></span>

2. <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

   ##(捲動條距離滾動元素即

3. scrollContainer<span style="font-size: 14px;"></span>的距離)的值，存入以及在<span style="font-size: 14px;"></span>##deactivated #中移除掉目前捲動事件的監聽。

4. <span style="font-size: 14px;"></span>在商品清單中，點擊進入詳情頁中的時候，將滾動條位置被緩存下來了，你可以放到<span style="font-size: 14px;"> </span>sessionStorage|localStorage<span style="font-size: 14px;"></span>中。當然，如果你使用了vuex，可以直接將值放入vuex中進行管理；

5. <span style="font-size: 14px;"></span>#從詳情頁中返回的時候，同時要做這樣的操作，將你存入快取中的

scrollTop

<span style="font-size: 14px;"></span>值重新賦予給目前p的捲軸

<span style="font-size: 14px;"></span>

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>

相關推薦：#########jQuery彈性滑動導航選單實現想法及程式碼_jquery############HTML+CSS實作網頁滑動門效果實例分享############jQuery滑動到底部載入下一頁資料實例講解######

以上是移動端彈性滑動以及vue記錄滑動位置詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！