H5項目中有滾動元素，ios系統拖動默認行爲和滾動事件衝突解決

問題：h5頁面，在ios系統中，拖動頂部固定元素（紅色區域）時，會默認拖動整個瀏覽器，導致出現白色背景，影響到自定義的滾動事件（橙色區域），因爲自定義滾動是用了ui框架的，會導致其短暫的無法滾動，必須要等整個頁面停穩了才能滾動橙色區域，影響到體驗。這應該是ios系統自帶的緩動效果，當用戶拖動頁面元素時給了一個回彈吸頂的效果，顯得更加柔和，但有時候我們是不需要的。

想要的效果：到頂後繼續向下滑動非滾動元素不出現白色背景，滑動滾動元素時，對應的元素滾動，兩者互不影響

問題的核心就是要組織滾動固定元素時防止整個頁面脫離頂部，出現白色的背景。使用e.preventdefault()是不管用的，最終發現一個很簡單的方法，就是給當前頁面的頂層元素設置一個css樣式：

.fixed{
    position: fixed;
    left: 0;
    top: 0;
  }

也就是把頂層元素浮動起來，這樣隨便怎麼拖動元素都不會出現默認的白色背景了。

但是當頁面中還有需要滾動的元素時，父級元素浮動後就導致其無法滾動了，可能和我使用的ui有關吧，總之得解決這個問題。

就需要分別監聽固定元素和滾動元素的touch事件，再分別設置父級元素的樣式。

<template>
  <div class="wrapper" :class="{'fixed': fixed}">
    <!-- 頂部欄 -->
    <div class="top" 
    @touchstart="headerTouchStart"
    @touchmove="headerTouchMove"
    @touchend="headerTouchEnd"
    ></div>
    <!-- 內容欄 -->
    <div class="container"
    @touchstart="contentTouchStart"
    @touchmove="contentTouchMove"
    @touchend="contentTouchEnd"
    ></div>
    <!-- 底部欄 -->
    <div class="footer"></div>
  </div>
</template>

<script>
  export default {
    name: 'Error404',
    data(){
      return {
        fixed: false,
        contentStartY: 0
      }
    },
    methods: {
      headerTouchStart(e) {
        // 固定元素滑動，浮動起來
        this.fixed = true
      },
      headerTouchMove(e) {
        // 組織默認事件，防止跳動
        e.preventDefault();
      },
      headerTouchEnd(e) {
        // 互動結束，浮動解除，防止滾動元素無法滾動
        this.fixed = false
      },
      contentTouchStart(e) {
        this.contentStartY = e.changedToches[0].clientY;
      },
      contentTouchMove(e) {
        let endY = e.changedToches[0].clientY;
        // 獲取滾動的距離
        let diff = endY - this.contentStartY;
        let scrollTop = $('.container').scrollTop()
        // 如果拉到頂了還繼續往下拉
        if(diff > 0 && scrollTop <= 0) {
          this.fixed = true;
          e.preventDefault();
        }else if(diff < 0){ // 如果沒有拉到頂，則正常滑動內容欄
          this.fixed = false;
        }
      },
      contentTouchEnd(e) {
        this.fixed = false;
      },
    },
  }

</script>

<style scoped lang="scss">
  .wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .fixed{
    position: fixed;
    left: 0;
    top: 0;
  }
</style>

其實重點就是position:fixed這個樣式的應用，根據實際情況使用定爲方式來解決實際問題。