React中侧边栏激活时如何禁用下方div的点击与滚动？

要实现侧边栏激活时禁用下方内容区的点击和滚动，同时保持侧边栏可滚动，可以按以下方式处理：

1. 完善CSS样式 #

保留pointer-events: none禁用点击，同时通过定位或事件阻止的方式处理滚动问题：

.content.behind {
  /* 禁用内容区所有点击交互 */
  pointer-events: none;
}

/* 确保侧边栏不受影响，维持自身可点击和滚动 */
.Navbar {
  pointer-events: auto;
  overflow-y: auto;
}

2. 方案一：固定定位避免滚动+保持位置 #

通过动态设置固定定位阻止滚动，同时记录滚动位置避免内容跳顶：

import { useState, useEffect, useRef } from 'react';

function YourComponent() {
  const [isOpen, setIsOpen] = useState(false);
  const contentRef = useRef(null);
  const [scrollPos, setScrollPos] = useState(0);

  useEffect(() => {
    const contentEl = contentRef.current;
    if (isOpen) {
      // 打开侧边栏时记录当前滚动位置
      setScrollPos(contentEl.scrollTop);
      // 设置固定定位阻止滚动，同时通过top值保持当前位置
      contentEl.style.position = 'fixed';
      contentEl.style.width = '100%';
      contentEl.style.top = `-${scrollPos}px`;
    } else {
      // 关闭时恢复原定位，并滚动到之前的位置
      contentEl.style.position = '';
      contentEl.style.top = '';
      contentEl.scrollTop = scrollPos;
    }
  }, [isOpen]);

  return (
    <>
      <Navbar isOpen={isOpen} setIsOpen={setIsOpen} />
      <div 
        ref={contentRef}
        className={isOpen ? "content behind" : "content"}
      >
        {/* 内容区域 */}
      </div>
    </>
  );
}

方案二：阻止滚动事件 #

不想用固定定位的话，直接监听滚动事件并阻止默认行为：

import { useState, useEffect, useRef } from 'react';

function YourComponent() {
  const [isOpen, setIsOpen] = useState(false);
  const contentRef = useRef(null);

  const blockScroll = (e) => {
    if (isOpen) {
      e.preventDefault();
      e.stopPropagation();
    }
  };

  useEffect(() => {
    const contentEl = contentRef.current;
    if (isOpen) {
      // 监听移动端触摸滚动和常规滚动事件，阻止内容区滚动
      contentEl.addEventListener('touchmove', blockScroll, { passive: false });
      contentEl.addEventListener('scroll', blockScroll);
    } else {
      contentEl.removeEventListener('touchmove', blockScroll);
      contentEl.removeEventListener('scroll', blockScroll);
    }

    return () => {
      // 组件卸载时清理事件监听
      contentEl.removeEventListener('touchmove', blockScroll);
      contentEl.removeEventListener('scroll', blockScroll);
    };
  }, [isOpen]);

  return (
    <>
      <Navbar isOpen={isOpen} setIsOpen={setIsOpen} />
      <div 
        ref={contentRef}
        className={isOpen ? "content behind" : "content"}
      >
        {/* 内容区域 */}
      </div>
    </>
  );
}

两种方案都能实现需求：禁用内容区的点击和滚动，同时侧边栏可正常滚动。方案一视觉上更稳定，方案二更轻量化。

内容的提问来源于stack exchange，提问作者HesT