由于 Chrome 想提高浏览器动画渲染帧数，要修改 eventListener 相关接口，出现了遮罩层无法屏蔽滚动动作的情况。
实现
安装依赖
npm install --save default-passive-events
code
require('default-passive-events');
preventBackScroll = (e) => {
e.preventDefault();
e.stopPropagation();
}
renderModal = (e) => {
// 阻止滚动
document.addEventListener('touchmove', this.preventBackScroll, { passive: false, capture: true });
// 遮罩层实现代码省略
return <div onClose={(e) => {
// 关闭遮罩层时放开
document.removeEventListener('touchmove', this.preventBackScroll, { passive: false, capture: true });
}}></div>
}
网友评论