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

-webkit-overflow-scrolling介紹

-webkit-overflow-scrolling: auto  |  touch;

auto： 普通滾動，當手指從觸摸屏上移開，滾動立即停止
touch：滾動回彈效果，當手指從觸摸屏上移開，內容會保持一段時間的滾動效果，繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會創建一個新的堆棧上下文。

兼容寫法

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

 

如何使用

上代碼：

<div class="scrollContainer">
     <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>
       <li>9</li>
       <li>10</li> 
     </ul>
</div>

 

 

 

.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);

需求

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

商品列表頁中，點擊某一商品，進入到詳情頁。

從詳情頁中返回到商品列表頁，頁面應當顯示的頁面應當是之前的樣子。

也就是說，滾動條的位置應該緩存下來；

思路

1. 商品列表需要被緩存下來,頁面的緩存方式請查看vue官方文檔keep-alive來緩存頁面，這樣，在詳情頁面返回的時候，頁面不至於重新加載。
2. 在商品列表生命周期activated中，監聽當前scrollContainer父元素的滾動事件，滾動時的回調中，獲取到scrollTop(滾動條距離滾動元素即scrollContainer的距離)的值，存入到以及在deactivated中移除掉當前滾動事件的監聽。
3. 在商品列表中，點擊進入詳情頁中的時候，將滾動條位置被緩存下來了，你可以放到sessionStorage|localStorage中。當然，如果你使用了vuex，可以直接將值放入vuex中進行管理；
4. 從詳情頁中返回的時候，同時要做這樣的操作，將你存入緩存中的scrollTop值重新賦予給當前div的滾動條
5. Ok，思路就是這樣子，大功告成。

vue中具體實現

我是用的vuex進行管理的滾動條位置，實現代碼如下：

<div class="scrollContainer" ref="scroll">    //加了一個ref，用於獲取當前dom 
     <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>
       <li>9</li>
       <li>10</li> 
     </ul>
</div>

 

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事件
}

原文地址：https://segmentfault.com/a/1190000012857661