移動端內滾動與外滾動

標籤：其它   外掛程式   www.   mes   體驗   底部   func   swipe   js外掛程式   

概述

在做移動端開發的時候，經常會遇到內滾動與外滾動的問題，下面我對這方面好好的總結了一下，供以後開發時參考，相信對其他人也有用。

參考資料：關於height、offsetheight、clientheight、scrollheight、innerheight、outerheight的區別一覽

內滾動與外滾動

關於移動端的內滾動和外滾動，有如下結論：

1. 如果如果內滾動是外滾動的一部分（比如正常頁面裡面有一個可以滾動的容器），那麼內滾動在滾動時，不會觸發外滾動，只有在滾動到頂部或者底部的時候，才會觸發外滾動。
2. 如果內滾動是一個彈層或者蒙版，那麼內滾動會觸發外滾動。（這就是滾動穿透，類似於點擊穿透）

帶來的問題

1.如果內滾動是外滾動的一部分，那麼滾動的體驗本身還是不錯的。但有時需要在內滾動到頂部或者底部的時候不觸發外滾動。

2.如果內滾動是一個彈層或者蒙版，這個時候體驗就很差了，有時候我們需要不論在什麼時候，內滾動都不觸發外滾動。

解決方案

對於問題2，一般是用swiper.js外掛程式或者slimeScroll外掛程式來解決的。

對於問題1，可以手動解決，下面說下解決思路。

用到的概念

• pageY: 表示相對於容器，滑鼠指標的位置。（用來判斷滑鼠是向上滑動還是向下滑動）
• scrollHeight: 表示整個元素的高度，包括了滾動內容的高度。
• clientHeight: 表示元素的可視高度，不包括滾動內容，邊框或邊距。
• offsetheight: 表示元素的高度，包括padding和邊框。
• scrollTop: 表示捲軸滾動的距離。

所以有如下關係：

scrollHeight = clientHeight + scrollTop

如果沒有邊框的話，offsetheight = clientHeight，那麼也有：

scrollHeight = offsetheight + scrollTop

根據上面的等式，可以判斷滑塊是否滑到頂部或者底部。

jquery的pageY

一般來說，pageY是通過event.pageY來擷取的，但是對於有些版本的jquery，需要用下面的代碼擷取pageY:

event.originalEvent.targetTouches[0].pageY

代碼

那麼檢測頂部的邏輯是：

1. scrollTop < 1
2. 手指仍舊向上滑動（注意，如果向下滑動，則不阻止滑動事件）

那麼檢測底部的邏輯是：

1. scrollHeight - （offsetheight + scrollTop） < 1
2. 手指仍舊向下滑動（注意，如果向下滑動，則不阻止滑動事件）

最後怎麼來阻止滑動呢？用e.preventDefault()即可。

代碼很好理解，就直接貼出來了：

//上下邊緣檢測setScroll: (select) => {  let $ele = $(select),      eleStart;  $ele.on('touchstart', function(e) {    eleStart = e.originalEvent.targetTouches[0].pageY;  });  $ele.on('touchmove', function(e) {    let eleTouch = e.originalEvent.targetTouches[0].pageY - boxInfoStart,        scrollVal1 = $ele.scrollTop(),        scrollVal2 = $ele[0].scrollHeight - $ele[0].offsetHeight - $ele.scrollTop();    //向上滑到頂部    if(eleTouch>0 && scrollVal1 < 1) {      e.preventDefault();    }    //向下滑到底部    if(eleTouch<0 && scrollVal2 < 1) {      e.preventDefault();    }  });},

其它

上面的代碼還可以用於解決，移動端拖動頁面頂部或者底部會出現黑塊，的問題。

移動端內滾動與外滾動