Javascript 反应、材质界面、选择、禁用滚动锁定、使菜单位置相对于锚定 从“React”导入React； 导入“/styles.css”； 从“@material ui/core/Input”导入输入； 从“@material ui/core/MenuItem”导入菜单项； 从“@material ui/core/FormControl”导入FormControl； 从“@material ui/core/Select”导入选择； 常量名称=[ “奥利弗·汉森”， “范亨利”， “四月塔克”， “拉尔夫·哈伯德”， “奥马尔·亚历山大”， “卡洛斯·阿伯特”， “米里亚姆·瓦格纳”， “布拉德利·威尔克森”， “弗吉尼亚·安德鲁斯”， “凯利·斯奈德” ]; const ITEM_HEIGHT=48； const ITEM_PADDING_TOP=8； 常量MenuProps={ 纸质道具：{ 风格：{ 最大高度：项目高度*4.5+项目填充顶部， 宽度：250 } }, disableScrollLock:true }; 导出默认函数App（）{ const[personName，setPersonName]=React.useState（[]）； const handleChange=事件=>{ setPersonName（event.target.value）； }; 返回( {names.map（name=>( {name} ))} ); }

代码也可以在这里找到

我使用的是React 16，最新的材质UI核心，材质UI选择组件

---

我在这里试图做的是，当我打开下拉菜单（disableScrollLock=true）时，当我滚动窗口时，下拉菜单将相对于未固定在窗口上的锚元素。如何实现这一点？

我不熟悉React，但我已经找到了一个使用不同组件的工作示例

看看这个答案：

Coder使用了一个

ReportComboBox

而不是

Select

，但他解决了代码片段的另一个问题：增加选择大小

在代码段中选择很多项时，会出现UI问题

足够离题了，我已经更改了答案片段以启用滚动（例如，通过设置

body{height:3000px；}

），您可以看到滚动将选择框保持在原来的位置：

---

希望这足以解决问题，或者至少是解决问题的一个线索。

谢谢，我需要窗口能够滚动，下拉菜单不是固定在屏幕上，而是固定在父元素上。我正在使用Material UI select寻找解决方案，看看这是否可行。当你滚动时，最后一个代码沙盒的选择不会固定在屏幕上l它会像静态选择一样从视口中消失。另外，您的原始沙盒中有一个问题，有许多用户选择，这在我提到的答案中得到了解决。

import React from "react";
import "./styles.css";

import Input from "@material-ui/core/Input";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const names = [
  "Oliver Hansen",
  "Van Henry",
  "April Tucker",
  "Ralph Hubbard",
  "Omar Alexander",
  "Carlos Abbott",
  "Miriam Wagner",
  "Bradley Wilkerson",
  "Virginia Andrews",
  "Kelly Snyder"
];

const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250
    }
  },
  disableScrollLock: true
};

export default function App() {
  const [personName, setPersonName] = React.useState([]);

  const handleChange = event => {
    setPersonName(event.target.value);
  };

  return (
    <div className="App" style={{ height: "1000px" }}>
      <FormControl>
        <Select
          labelId="demo-mutiple-name-label"
          id="demo-mutiple-name"
          multiple
          value={personName}
          onChange={handleChange}
          input={<Input />}
          MenuProps={MenuProps}
        >
          {names.map(name => (
            <MenuItem key={name} value={name}>
              {name}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );
}