react實現(xiàn)阻止父容器滾動

更新時間：2023年11月14日 10:07:56 作者：天天向上的鹿茸

這篇文章主要介紹了react實現(xiàn)阻止父容器滾動方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

react阻止父容器滾動

最近在做代碼遷移的時候出現(xiàn)一個問題，發(fā)現(xiàn)之前自己寫好的一個自定義滾動條組件有個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的閉包陷阱

注冊函數(shù)并沒有及時更新，dragY 和 dragSpeed的閉包導致出現(xiàn)了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]);

又一個問題出現(xiàn)了

每次應該把之前的事件銷毀，然后在注冊才對。

不然多個事件同時觸發(fā)導致了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]);