資訊專欄INFORMATION COLUMN
摘要：背景由于移動端原生滾動的局限性以及兼容性，部分特定場景的需求無法滿足。示例模擬滾動知識點通過移動端的系列事件觸發模擬滾動，獲取手指滑動的偏移量，進而改變來進行位置偏移。
背景
由于移動端原生滾動的局限性以及兼容性，部分特定場景的需求無法滿足。例如，筆者最近就接了一個需求：整個頁面分為三塊，每塊內容的高度不等（但都超過一屏），要求滾動到內容的臨界點有一個停頓的效果，下拉可以看到下一塊的部分內容，滿足條件則滑到下一塊內容。這種場景下，原生的滾動根本無法支持。因此，本文的主角就亮相了：模擬滾動，即盡可能的模擬原生滾動，但是又提供了一些擴展，滿足復雜場景的需求。
本文將從模擬滾動需要實現的功能、技術分析和方案來進行闡述，通讀本文，讀者將對模擬滾動的常見功能和技術要點有一定了解。
示例：模擬滾動
知識點通過移動端的touch系列事件觸發模擬滾動，獲取手指滑動的偏移量，進而改變translateY來進行位置偏移。
滾動容器滾動容器擁有高度，滾動區域的高度大于滾動容器，在滾動時，我們對滾動區域進行偏移，以達到滾動的視覺效果。
通過滾動區域的高度可以通過offsetHeight獲取，但是在以下情況下會遠遠小于實際高度。
內聯樣式：在DOM節點生成時，樣式還未渲染完成，此時獲得的高度是默認樣式的高度，待樣式渲染完成后，高度可能會有變化
圖片高度：img節點的高度開始是0，在圖片加載完成時，才會等于圖片高度，因此這里也會存在誤差
慣性滾動我們知道，為了讓滾動更加流暢，原生的滾動會有一個慣性滾動的效果，即手指快速滑動松開后，滾動區域會繼續滾動一段距離后停止。
為了實現這個功能，我們需求知道手指滑動的速度，根據比率計算目標滾動位置，然后驅動滾動，讓其到達目標位置。
這里筆者嘗試了兩種方案：
通過requestAnimationFrame不斷進行偏移，直到到達目標位置
使用transition進行過渡，設置動畫曲線讓其到達目標位置
筆者對比了兩種方案，最終選擇了方案2，原因是transition過渡會更加的流暢，而requestAnimationFrame會有略微的卡頓，但是transition過渡，我們實時觸發滾動事件時，不好拿到其當前的位置，查閱了一些資料，筆者最終找到了解決方法，即getComputedStyle，這個API可以拿到當前頁面渲染的實時樣式，也就是說，哪怕它處于過渡動畫中，我們可以實時拿到它的真實位置。
邊界回彈當滾動超出邊界時，通常我們還可以讓其繼續滾動，但是這時候會設置阻礙，即滾動速度慢下來，當滾動停止時，我們再將其拽回到邊界線。我們可以通過監聽transitionend事件來判斷慣性滾動停止，這里的技術點不做過多分析，感興趣可以在文末中的源碼找答案。
默認行為通常情況下，我們需要阻止瀏覽器的默認行為（如滾動），但是這樣也會誤殺一些我們需要的默認行為（如超鏈接跳轉、輸入框聚焦）。
解決方法很簡單，在touchstart觸發時，我們判斷一下目標節點是否需要阻止默認行為，比如說tagName=INPUT，我們不阻止默認行為。
點擊事件默認行為被阻止，綁定在子節點上的點擊事件就無法觸發了，因此這里我們需要判斷一下是否需要觸發點擊事件。可以通過touch系列事件模擬點擊行為，然后通過document.createEvent("Event")來主動觸發click事件。
滾動指示器在滾動區域中，通常在右側會有一個指示器，用于查看當前在整個內容區塊的大概位置。
為了方便使用，筆者注冊了一系列的鉤子，方便使用者調用，scroll鉤子就是其中之一，在滾動的時候它會實時觸發，在這里就派上用場了。我們通過scroll鉤子改變指示器的位置，唯獨要注意的是滾動超出邊界時，指示器會變短然后恢復。
@axe/scroller基于以上知識點和技術分析，筆者寫了一個模擬滾動js庫（無任何依賴）：https://github.com/ansenhuang/axe/blob/master/packages/scroller/README.md
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97644.html
摘要：同時，請在其他移動端瀏覽器也這么處理，不要只對蘋果做這些處理。蘋果對于虎頭蛇尾的做法真讓人頭疼，這作風跟巨硬真像。 轉載請注明英文原文及譯文出處 原文地址：Issues with position fixed & scrolling on iOS 原文作者：Remy Sharp譯文地址：移動端 fixed 和 scroll 問題 譯文作者：鎏金圣手火麒麟 最近在做iOS端的H5頁面...
摘要：同時，請在其他移動端瀏覽器也這么處理，不要只對蘋果做這些處理。蘋果對于虎頭蛇尾的做法真讓人頭疼，這作風跟巨硬真像。 轉載請注明英文原文及譯文出處 原文地址：Issues with position fixed & scrolling on iOS 原文作者：Remy Sharp譯文地址：移動端 fixed 和 scroll 問題 譯文作者：鎏金圣手火麒麟 最近在做iOS端的H5頁面...
閱讀 1574·2021-09-23 11:21
閱讀 2345·2021-09-07 10:13
閱讀 834·2021-09-02 10:19
閱讀 1125·2019-08-30 15:44
閱讀 1720·2019-08-30 13:18
閱讀 1913·2019-08-30 11:15
閱讀 1105·2019-08-29 17:17
閱讀 2017·2019-08-29 15:31
