react实现阻止父容器滚动
react阻止父容器滚动
最近在做代码迁移的时候出现一个问题，发现之前自己写好的一个自定义滚动条组件有个bug,那就滚动时父容器也会滚动。
看一下代码，代码做了简化
export default ()=>{
return return (
<div
className={classNames(getCls('container'), isDragRef.current ? 'active' : '', className)}
ref={scrollDOMRef}
onWheelCapture={(e: any) => {
e.preventDefault();
if (e.deltaY < 0) {
// 向上
setDragY(dragY - dragSpeed);
} else {
// 向下
setDragY(dragY + dragSpeed);
}
}}>
</div>
);
}
既然父容器会滚动那就阻止默认行为就好e.preventDefault();,但是没用。
这里我猜测应该因为react的事件是合成事件的缘故，所有事件都注册document上，所以导致阻止的默认行为并没有阻止到父容器上。
那就用原生的呗。
useEffect(() => {
if (scrollDOMRef.current) {
scrollDOMRef.current.addEventListener('wheel', (e) => {
e.preventDefault();
if (e.deltaY < 0) {
// 向上
setDragY(dragY - dragSpeed);
} else {
// 向下
setDragY(dragY + dragSpeed);
}
});
}
}, [scrollDOMRef.current]);
原生事件和react事件一起用时要注意，阻止冒泡要考虑清楚，因为可能会导致react合成事件失效。
那这么做后就可以了吗？
确实
父容器不滚动了
但是又掉进了react的闭包陷阱
注册函数并没有及时更新，dragY 和 dragSpeed的闭包导致出现了bug。
那么又应该怎么做呢？
useEffect(() => {
if (scrollDOMRef.current) {
scrollDOMRef.current.addEventListener('wheel', (e) => {
e.preventDefault();
if (e.deltaY < 0) {
// 向上
setDragY(dragY - dragSpeed);
} else {
// 向下
setDragY(dragY + dragSpeed);
}
});
}
}, [scrollDOMRef.current, dragY, dragSpeed]);
又一个问题出现了
每次应该把之前的事件销毁，然后在注册才对。
不然多个事件同时触发导致了bug。
useEffect(() => {
const handle = (e: any) => {
e.preventDefault();
if (e.deltaY < 0) {
// 向上
setDragY(dragY - dragSpeed);
} else {
// 向下
setDragY(dragY + dragSpeed);
}
};
if (scrollDOMRef.current) {
scrollDOMRef.current.addEventListener('wheel', handle, {
passive: false,
});
}
return () => {
if (scrollDOMRef.current) {
scrollDOMRef.current.removeEventListener('wheel', handle);
}
};
}, [scrollDOMRef.current, dragY, dragSpeed]);
passive
passive为false时，浏览器执行完回调函数才知道有没有调用preventDefault，如果没有调用preventDefault，再去执行默认行为，就是滚动。这样就回造成滚动不流畅。
passive为true，就是告诉浏览器不会调用preventDefault，浏览器直接执行滚动就行，不用考虑回调函数了。
这时，即使你在回调函数里调用preventDefault也不会生效。
mdn中说，在有些浏览器（特别是Chrome和Firefox）中，你监听window、document或者document.body上的touchstart和touchmove，会将passive默认设置为true。
还是要提醒大家，在你不需要调用preventDefault的时候，监听scroll或者touchmove，将passive设置为true
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
最近需要使用 Hybrid 的方式开发一 个 APP,交互和原生 APP 相似并且需要 IM 通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常详细,感兴趣的小伙伴跟着小编一起来看看吧2025-01-01
这篇文章主要为大家介绍了React可定制黑暗模式切换开关组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了react中实现拖拽排序react-dnd功能,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
Workbox是Google Chrome团队推出的一套 PWA 的解决方案,这套解决方案当中包含了核心库和构建工具,因此我们可以利用Workbox实现Service Worker的快速开发,本文小编给大家介绍了React中使用Workbox进行预缓存的实现,需要的朋友可以参考下2023-11-11
React是用于构建用户界面的JavaScript库。本文详细讲解了React的生命周期，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
这篇文章主要介绍了从头写React-like框架的工程搭建实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
基本路由跳转是最常见的一种方式,下面介绍React 中常用的几种路由跳转方式,感兴趣的朋友一起看看吧2023-12-12
React动画实现方案Framer Motion让页面自己动起来
这篇文章主要为大家介绍了React动画实现方案Framer Motion让页面自己动起来，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
本篇文章主要介绍了详解webpack2+React 实例demo，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
React将组件（component）看成一个状态机（State Machines），通过其内部自定义的状态（State）和生命周期（Lifecycle）实现并与用户交互，维持组件的不同状态2022-11-11
最新评论