React中Material UI Autocomplete的Popper打开时如何禁止指定section标签滚动

你可以通过监听Autocomplete的弹窗开关状态，动态修改指定<section>的滚动属性来实现需求，步骤如下：

• 步骤1：声明受控状态记录弹窗开关状态，同时给目标<section>绑定ref方便操作DOM

import { useState, useRef, useEffect } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

function YourComponent() {
  // 控制Autocomplete popper的开关状态
  const [isPopperOpen, setIsPopperOpen] = useState(false);
  // 绑定要禁止滚动的目标section
  const targetSectionRef = useRef(null);
  // ...其他业务逻辑

• 步骤2：给Autocomplete绑定onOpen和onClose事件同步状态，给目标section绑定ref

return (
    <div>
      {/* 要禁止滚动的目标section */}
      <section ref={targetSectionRef}>
        {/* 你的原有内容 */}
      </section>

      <Autocomplete
        {/* 你的原有配置，比如PopperComponent、options等 */}
        onOpen={() => setIsPopperOpen(true)}
        onClose={() => setIsPopperOpen(false)}
        renderInput={(params) => <TextField {...params} label="选择项" />}
      />
    </div>
  )
}

• 步骤3：通过useEffect监听弹窗状态，动态修改section的滚动属性

useEffect(() => {
  const sectionEl = targetSectionRef.current;
  if (!sectionEl) return;

  if (isPopperOpen) {
    // 先存储原有的overflow属性，关闭时还原避免覆盖原有样式
    sectionEl.dataset.originOverflow = sectionEl.style.overflow;
    sectionEl.style.overflow = 'hidden';
    // 如果移动端存在滚动穿透问题，可以额外添加以下代码阻止默认滚动
    const preventScroll = (e) => e.preventDefault();
    sectionEl.addEventListener('touchmove', preventScroll, { passive: false });
    // 存储事件函数引用方便卸载时移除
    sectionEl.dataset.preventScrollFn = preventScroll;
  } else {
    // 还原overflow属性
    sectionEl.style.overflow = sectionEl.dataset.originOverflow || '';
    // 移除移动端滚动阻止事件
    if (sectionEl.dataset.preventScrollFn) {
      sectionEl.removeEventListener('touchmove', sectionEl.dataset.preventScrollFn);
      delete sectionEl.dataset.preventScrollFn;
    }
  }

  // 组件卸载时强制还原，避免样式残留
  return () => {
    if (sectionEl) {
      sectionEl.style.overflow = sectionEl.dataset.originOverflow || '';
      if (sectionEl.dataset.preventScrollFn) {
        sectionEl.removeEventListener('touchmove', sectionEl.dataset.preventScrollFn);
      }
    }
  };
}, [isPopperOpen]);

如果你不方便给section绑定ref，也可以用document.querySelector('目标section的CSS选择器')来定位DOM元素，逻辑完全一致。

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