最近在做移動專案時遇到乙個頁面滾動穿透問題，具體場景是這樣的，在乙個可滾動的列表頁中開啟彈窗，底部的頁面理論上是不可滾動的，但是當滑動彈窗時，底部頁面會跟隨滾動，這就是所謂的頁面滾動穿透的問題。這個是比較常見的問題，基本都會遇到，google一下出解決方案也是挺多的。以下根據不同的適用場景總結一些解決方案：
在列表容器的父元素上設定樣式overflow:hidden來禁用滾動
.alpha
.alpha body
$('html').addclass('alpha');
$('html').removeclass('alpha');
當彈出蒙層時，禁用了html和body的滾動條，滾動列表的滾動位置會丟失，會重置到沒有滾動的狀態，需要js進行還原。
手機掃碼檢視效果：
檢視demo
1、未滾動時彈出蒙層，底部列表會被禁用滾動
2、滾動後再彈出蒙層，滾動位置會丟失，重置到無滾動的位置
通過阻止彈窗的touchmove預設事件禁用滾動實現
**實現：
var modal = document.getelementbyid('modal'); // 彈窗dom物件
modal.addeventlistener('touchmove', function(e) , false);
彈窗中里不能有其它需要滾動的內容，如大段文字需要固定高度，顯示滾動條也會被阻止。
設定列表容器元素為positon:fixed
**實現:
.alpha.body這種方法同樣有以上兩種方法的缺點，滾動列表的滾動位置會丟失，會重置到沒有滾動的狀態，通過js獲取滾動條位置，調整位置即可。
開啟彈窗時則在body元素上新增class
移動端一畫素問題解決方案
在移動端解析度是不相同的,目前來說可以分一倍屏,二倍屏,三倍屏,在不同解析度上顯示的1畫素可能會被渲染為2個畫素點或者三個畫素點,這樣嚴重影響了美觀,所以我們要解決一畫素問題 html border div div css after裡面的width 200 height 200 就是把after元...
滾動穿透問題完美解決方案
滾動穿透 簡單的說，滾動穿透就是彈層中有滾動時，滾動彈層滾動條背景下面內容也會滾動 目標 彈層滾動時，背景下面內容不會滾動，彈出層關閉後頁面的滾動位置仍在原處不會丟失！下面這段 直接引用，看效果 open modal one open modal two 這裡是可滾動內容 滾動 content 滾動...
快取失效 快取穿透問題解決方案
快取失效 快取雪崩 引起這個原因的主要因素是高併發下，我們一般設定乙個快取的過期時間時，可能有一些會設定5分鐘啊，10分鐘這些 併發很高時可能會出在某乙個時間同時生成了很多的快取，並且過期時間在同一時刻，這個時候就可能引發 當過期時間到後，這些快取同時失效，請求全部 到db，db可能會壓力過重。處理...