IOS移動端滾動問題之-webkit-overflow-scrolling

-webkit-overflow-scrolling

1.概述

1.1 定義

屬性控制元素在移動設備上是否使用滾動回彈效果

1.2 取值

• auto：使用普通的滾動效果。當手指從設備的觸摸屏上離開時，滾動會立即停止
• touch：使用具有回彈效果的滾動。當手指從設備的觸摸屏上離開時，滾動區域的內容會繼續保持一段時間的滾動，且繼續滾動的速度與時間與手勢滑動的劇烈程度成正比。

2.瀏覽器兼容性

-webkit-overflow-scrolling 屬性的瀏覽器兼容性請參考 CanIUse

3.使用場景

在IOS移動端上，當使用overflow: scroll;屬性時，滾動效果慢且不流暢，該情況可以使用

-webkit-overflow-scrolling: touch;屬性，讓滾動條產生回彈效果，增加滾動的流暢性，提高用戶的體驗。

4.問題

當頁面滑動至底部（頂部暫未發現）時，當回彈效果結束的瞬間，繼續上拉讓頁面向下滾動，會導致滾動區域卡住不動，且一段時間后自動恢復正常。該屬性包含多種問題但不僅限於以上一種。

5.解決方案

5.1 原理

在手指在移動設備的觸摸屏上滑動的過程中，監聽手指開始滑動，滑動過程中及滑動結束3個事件。在滑動中事件中檢查當前滑動的位置是否到達滾動區域的底部，若已到達底部則停止滑動。

5.2 實現

給滑動區域添加手勢觸摸的相關事件

<div @touchstart="touchStart" @touchmove="touchMove" @touchEnd="touchEnd">
  <!-- 這是一個滾動區域 -->
</div>

定義一個變量用來記錄上一次手勢滑動過程中最新位置的縱坐標值

export default {
  data () {
    lastScrollY: 0 // 上一次手勢滑動過程中最新位置的縱坐標
  }
}

通過手勢滑動過程中出發的事件監聽滾動區域是否已經到達底部

export default {
  methods: {
    touchStart(e) {
      // 滑動開始時記錄起始位置縱坐標
      this.lastScrollY = e.touches[0].clientY
    },
    touchMove(e) {
      // 滑動過程中記錄當前位置縱坐標
      let top = e.touches[0].clientY
      // 當前滾動條距離頂部的距離
      let scrollTop = e.currentTarget.scrollTop
      // 判斷滾動條滾動的方向
      let direction = (this.lastScrollY - top) < 0 ? 'up' : 'down'

      // (若滾動條距離頂部的距離 >= 滾動區域的高度 - 滾動可視區域的高度) && 滾動條滾動方向向下 ：已到達滾動區域的底部
      if (scrollTop >= (e.currentTarget.scrollHeight - e.currentTarget.offsetHeight) && direction === 'down') {
        // 取消事件的默認行為
        e.preventDefault()
        // 還原記錄的坐標值
        this.lastScrollY = 0
      } else {
        // 否則更新記錄的當前位置縱坐標
        this.lastScrollY = top
      }
    },
    touchEnd() {
      // 每一次滑動結束時還原記錄的坐標值
      this.lastScrollY = 0
    }
  }
}