所謂滾動穿透，指我們滑動頂層的彈窗，但效果上卻滑動了底層的內容。出現該問題的大前提：
例如：vue-cli中包裹的最外層html/body沒有設定height:100%;overflow:hidden;
在手機上開啟頁面。(chrome上觀測不到！！！高維世界?)
!!!chrome的移動端除錯模擬器是看不見任何問題的本文提供的解決案例的框架為vue-cli，若您使用原生或者react也不要緊，原理是一模一樣的。
具體原理分析如下：
明白了以上的兩種原理，其實就很好解決了。
明白了以上的兩種原理，其實就很好解決了。
明白了以上的兩種原理，其實就很好解決了。
**如下：
出現吧彈窗
如果彈窗本身不需要滑動，那是非常簡單的。方法a、從讓頂部不穿透的考慮觸發，我們可以這麼作修改
直接修改頂層彈窗的div，設定@touchmove.prevent即可.
實現後的效果如下：
方法b、從讓底層不能滾動的考慮觸發，我們可以這麼作修改
我們在彈窗出現的時候，臨時不讓底部可以滾動；在彈窗消失的時候，再把底部可以滾動的功能加回去。這裡我們使用新增類名，使得底層臨時不能滑動解決。
類名裡面我們利用設定了position：fixed;不會隨螢幕滾動的原理。
css新增如下
.dialog-open這裡還是放出完整**。
出現吧彈窗
我們修改本文最上方的(未解決穿透時)的原始**結構，僅新增多個li
並且這裡直接對父級採用touchmove.prevent是不可行的，因為彈窗本身需要滾動，若使用了，本身也滾不了了。
bug效果如下：
顯然這裡我們不能完全照抄情況一的方法a。否則整塊元素都划不動了。
父級設定touchmove.prevent，其內的元素也是會受到影響的。但解決原理是一樣的。
但解決原理是一樣的。
但解決原理是一樣的。
既然父級會影響，那我搞個同級不就好了嗎！
如下：我們多新增一層元素設為touchmove.prevent，同級的元素是不會影響的，利用z-index區分開來。
方法c：還是從改變頂層元素不讓穿透的思想解決
方法a的優化公升級版下面是我們的部分修改方案（期間我們還會遇見乙個問題，關於 touchomove 和 click 的問題）
出現吧彈窗
隱藏彈窗
touchmove連攜的click和正常的click。
究其原因是：
在移動端，手指點選乙個元素，會經過：touchstart --> touchmove -> touchend --> click解決方案關鍵在於區分 click 事件和 touchmove 事件。
**如下：
出現吧彈窗
@touchstart="touchstart"
@touchend="touchend"
@touchmove.prevent.stop>
隱藏彈窗
方法d：按照改變底層元素的思想解決
我本以為方法b的**，是可以通用在兩種情況的，但經過幾次測試發現並不行。
需要小小的改動一下。其中會有乙個問題，感覺就是聚焦的問題，當滑動了遮罩的部分，瀏覽器就聚焦在遮罩層了。
這個時候需要再聚焦回來才能流暢地滑動。
那麼怎麼解決呢！！！請看下方鄙人表演乙個四兩撥千斤
touch-action: none;
}給它的遮罩結構的類新增乙個禁用瀏覽器所有平移、縮放手勢的屬性。並且檢視mdn文件後，發現它不會被繼承————即是說不會影響到我們需要滑動的子級。
這樣就不存在上方說的什麼聚焦(只是我的說法)了，它壓根沒法被觸碰。其他**同方法b。僅多一句css。
完美解決。
html dom addeventlistener() 方法
(mdn解釋touch-action)[
compete.
可能完美解決移動端滾動穿透
1.overflow hidden 但是存在的缺陷是你的網頁會回滾到頂部 2 js阻止滾動事件 但是彈窗內的元素會無法滾動 3 fixed 加上js記錄滾動的位置 這個方案應該是所有文章提到的最優方案，但是其實吧我並不喜歡這種方案，改變body或者其他父級元素的position可能會影響到子集元素的...
移動端滾動穿透解決方法
當頁面中出現彈層時，彈層頁面滾動也會引起body的滾動，解決方法如下 開啟彈層時獲取當前頁面的滾動值，並給body設定position fixed top 當前頁面的滾動值 var scrollpx body scrolltop body addclass openfixed body css to...
移動端滾動穿透問題
一 body。一般pc端這樣就行了，但在移動端可就不行了，因為他有touchmove。二 可以阻止彈層的touchmove事件，但如果你的彈層內的內容需要滑動，這種方法pass document.body.addeventlistener touchmove function e 三 後來找到乙個比...