由于 Chrome 想提高瀏覽器動(dòng)畫渲染幀數(shù),要修改 eventListener 相關(guān)接口操骡,出現(xiàn)了遮罩層無法屏蔽滾動(dòng)動(dòng)作的情況九火。
實(shí)現(xiàn)
安裝依賴
npm install --save default-passive-events
code
require('default-passive-events');
preventBackScroll = (e) => {
e.preventDefault();
e.stopPropagation();
}
renderModal = (e) => {
// 阻止?jié)L動(dòng)
document.addEventListener('touchmove', this.preventBackScroll, { passive: false, capture: true });
// 遮罩層實(shí)現(xiàn)代碼省略
return <div onClose={(e) => {
// 關(guān)閉遮罩層時(shí)放開
document.removeEventListener('touchmove', this.preventBackScroll, { passive: false, capture: true });
}}></div>
}