1、 問題
眾所周知崭倘，移動(dòng)端當(dāng)有 fixed 遮罩背景和彈出層時(shí)，在屏幕上滑動(dòng)能夠滑動(dòng)背景下面的內(nèi)容类垫，這就是臭名昭著的滾動(dòng)穿透問題司光，下面是幾種解決方案。
2悉患、解決方案
-
&1 方案一:
當(dāng)打開蒙層時(shí)残家，給html和body元素添加樣式; 當(dāng)關(guān)閉蒙層時(shí)，移除以上樣式overflow: hidden; height: 100%; 缺點(diǎn):
1售躁、兼容性不好坞淮，部分安卓機(jī)型以及safari中，無法無法阻止底部頁面滾動(dòng)
2陪捷、由于 html 和 body的滾動(dòng)條都被禁用回窘，彈出層后頁面的滾動(dòng)位置會(huì)丟失，需要用 js 來還原
3揩局、如果蒙層內(nèi)容較高毫玖，也需要滾動(dòng)，則無法實(shí)現(xiàn)對(duì)應(yīng)需求-
&2 方案二:
利用移動(dòng)端的touch事件，來阻止默認(rèn)行為modal.addEventListener('touchmove', function(e) { e.preventDefault(); }, false); 缺點(diǎn):
1付枫、彈出層里不能有其它需要滾動(dòng)的內(nèi)容-
&3 方案三:
我們要阻止頁面滾動(dòng)烹玉，可以將其固定在視窗（即position: fixed），這樣它就無法滾動(dòng)了阐滩，當(dāng)蒙層關(guān)閉時(shí)再釋放二打。body.modal-open { position: fixed; width: 100%; }但是這樣會(huì)出現(xiàn)一個(gè)同樣的問題，就是當(dāng)前滾動(dòng)條的位置同樣會(huì)丟失掂榔，所以我們必須用js得到當(dāng)前滾動(dòng)條的位置手動(dòng)設(shè)置继效，當(dāng)隱藏蒙層時(shí)還原.如下
showModel() { let top = Tool.getScrollOffsets().y //獲取滾動(dòng)條高度 document.body.classList.add('modal-open') document.body.style.top = -top + 'px' ... } hideModel() { document.body.classList.remove('modal-open') document.body.style.top = 0 window.scroll(0,this.state.top) //回到原先的top }完美解決
