踩坑頁面蒙層致使的雙滾動條

習慣性記錄平常工做所遇坑點，不單單是經驗分享，真心但願走過路過的大神留言賜教！

場景如述：蒙層下一可滾動加載的 List，蒙層上一可滾動加載的 List。

目標爲蒙層展示時下層滾動不觸發，幾種解決方案：

• 禁用下層 touch 事件
• 禁用下層滾動事件
• 裁切下層溢出屏幕元素曲線禁用下層滾動事件

禁用 touch 事件，你可分別禁用 touchstart、touchmove、touchend，也可巧妙的爲元素設置 touch-action: none 屬性。但滾動滑塊依然存在：

用戶沒法觸摸觸發滾動但可拖動滑塊觸發滾動...

因而乎將下層元素裁切至與屏幕等高，無溢出天然不會觸發滾動，裁切方案以下：

• 蒙層呈現時設置下層元素高度爲屏幕可用高度，並添加 overflow: hidden 屬性；蒙層消失時恢復元素默認設置。
• 蒙層呈現時爲下層元素添加 fixed 定位屬性；蒙層消失時恢復元素默認設置。

{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

方案二顯然優於方案一，因未動用 JS 且考慮大多人區分不清 availHeight、clientHeight、offsetHeight、scrollHeight...

但蒙層消失時下層的 scrollTop 未恢復...

假定下層 List 含 100 條數據，用戶滾動瀏覽至第 60 ~ 70 條這一屏時開啓蒙層，下層元素被裁切默默恢復 scrollTop = 0。蒙層關閉時將爲用戶呈現第 0 ~ 10 條數據而非第 60 ~ 70 條，用戶想繼續瀏覽第 70 ~ 100 條則需瘋狂上拉頁面。

故在開啓蒙層前記錄此刻 scrollTop 值，關閉蒙層時恢復下層 scrollTop。然 scrollTop 的獲取與設置依然有坑，存在如下兩種方式：

• document.documentElement.scrollTop

var scrollTop = document.documentElement.scrollTop
document.documentElement.scrollTop = scrollTop

• document.body.scrollTop

var scrollTop = document.body.scrollTop
document.body.scrollTop = scrollTop

部分瀏覽器支持 document.documentElement.scrollTop 而部分支持 document.body.scrollTop，所幸其中一者有值另外一者必爲 0，取巧方案：

var scrollTop = document.documentElement.scrollTop + document.body.scrollTop
document.documentElement.scrollTop = scrollTop
document.body.scrollTop = scrollTop

不幸的是，即使裁切元素可防止觸摸蒙層時下層滾動，但滾動事件依然透至下層，致使上層滾動卡澀。IOS 如是，Android 經住了考驗（Android 終於勝出一局）。

上述方案有缺陷，但願走過路過的大神留言賜教！

---

做者：呆戀小喵

個人後花園：https://sunmengyuan.github.io...

個人 github：https://github.com/sunmengyuan

原文連接：https://sunmengyuan.github.io...