彈窗是一種常見的交互方式，而蒙層則是彈窗必不可少的元素挫酿，用于隔斷頁面與彈窗區(qū)塊构眯，暫時(shí)阻斷頁面的交互。但是早龟，我們會(huì)發(fā)現(xiàn)惫霸，當(dāng)彈出遮罩層后，底層body的內(nèi)容也是可以滾動(dòng)葱弟，顯然這不是我們想要的效果壹店，這個(gè)是最近做項(xiàng)目頻繁出現(xiàn)的一個(gè)問題，對于這個(gè)問題嘗試了幾種解決方案芝加，皆存在弊端茫打。
方法一：
當(dāng)觸發(fā)浮層的時(shí)候?qū)ody加css樣式
body: {
height: 100%;
overflow: hidden;
}
使用這個(gè)方法測試后發(fā)現(xiàn)，在pc端支持良好，在移動(dòng)端就很尷尬了老赤，部分Android手機(jī)支持，iOS手機(jī)完全不支持
方法二：
我們寫的這個(gè)項(xiàng)目正好是個(gè)Vue項(xiàng)目制市，可以用vue提供的 @touchmove.prevent 方法可以用來阻止滑動(dòng)抬旺，當(dāng)時(shí)用了之后感覺良好，結(jié)果測試來給報(bào)bug了祥楣，說是遮罩頁上的其他需要滑動(dòng)的元素都無法滑動(dòng)了开财，啊尷尬了，這個(gè)方式禁掉了所有的滑動(dòng)時(shí)間误褪，看來對于我的需求來說依然用不得了...
方法三：
這個(gè)方法使用定位的原理责鳍，也是目前項(xiàng)目使用的方式，測試后移動(dòng)端支持良好兽间，靠譜＠稹！嘀略！
需要注意的細(xì)節(jié)恤溶，就是將頁面定位后，內(nèi)容會(huì)回到頭部最頂端帜羊，如有需要咒程，這里我們需要記錄一下，當(dāng)取消蒙層時(shí)同步top值讼育。
在vue項(xiàng)目使用帐姻，封裝了個(gè)簡單的
+在vue項(xiàng)目下通過自定義指令封裝了個(gè)簡單的指令
'use strict';
var scrollTop = 0;
function install(Vue) {
Vue.directive('banscroll', {
bind(el, binding, vnode, oldVnode) {
scrollTop = window.scrollY
document.body.style.position = 'fixed';
document.body.style.top = `-${scrollTop}px`;
document.body.style.left = 0;
document.body.style.right = 0;
document.body.style.overflow = 'hidden';
},
unbind(el) {
document.body.style.position = '';
document.body.style.top = 0;
document.body.style.overflow = 'auto';
window.scrollTo(0, scrollTop);
}
})
}
export default install;
