Antd 选择和自动完成列表元素“粘”在内部元素滚动上

Posted 2023-02-22

【中文标题】Antd 选择和自动完成列表元素“粘”在内部元素滚动上

【英文标题】：Antd select and autocomplete list elements 'stick' on inner element scroll

【发布时间】：2019-05-20 14:42:37

【问题描述】：

我在此沙盒上重现了该问题：https://codesandbox.io/s/53lnxrwl2k。

我在那里所做的是将body, html, #root, .App 设置为height: 100vh;，然后让我的main flex 增长以填充视口的其余部分，并基本上充当应用程序的滚动区域。

html,
body,
#root,
.App 
  margin: 0;
  padding: 0;
  overflow-y: hidden;
  height: 100vh;


main 
  overflow-y: scroll;
  flex: 1 0 auto;

问题是 - 如果我在 Antd 自动完成中选择一个项目 - 然后我滚动 - 你会看到列表内容保持原位。

如果我们检查 HTML，我们可以看到 Antd 将列表内容作为单独的 div 元素插入到 react #root 元素之外，并对其应用固定样式：

<div class="ant-select-dropdown ant-select-dropdown--single ant-select-dropdown-placement-bottomLeft" style="width: 200px; left: 158.781px; top: 126px;">
  <div style="overflow: auto; transform: translateZ(0px);">
   <ul role="listbox" class="ant-select-dropdown-menu  ant-select-dropdown-menu-root ant-select-dropdown-menu-vertical" tabindex="0">
      <li role="option" unselectable="on" class="ant-select-dropdown-menu-item" aria-selected="false" style="user-select: none;">Burns Bay Road</li>
      <li role="option" unselectable="on" class="ant-select-dropdown-menu-item" aria-selected="false" style="user-select: none;">Downing Street</li>
      <li role="option" unselectable="on" class="ant-select-dropdown-menu-item" aria-selected="false" style="user-select: none;">Wall Street</li> 
    </ul>
  </div>
</div>

重要的部分是：

style="width: 200px; left: 158.781px; top: 126px;">

所以看起来正在发生的事情是 Antd 正在调整窗口滚动的样式 - 但因为我的滚动元素是嵌套的 - 它没有检测到它会改变。

有没有简单的解决方法来解决这个问题？

更新：这个问题似乎与 rc-select 相关 - 正如这个 repro 演示的那样：https://codesandbox.io/s/x2k94o4o9o

【问题讨论】：

您的沙盒根本无法滚动，似乎缺少什么

@Justcode 抱歉 - 现在已排序

这是一个演示修复的代码框：codesandbox.io/s/q32mmlwx26

您希望 div 内的下拉菜单随着窗口的滚动而滚动？如果是，您可以使用固定位置吗？

@Justcode - 没有。我希望它只是滚动。

【参考方案1】：

根据作者comment，您需要设置相对于容器的位置并将容器设置为弹出容器，该插件中有一个名为getPopupContainer的属性。

喜欢这个

  <div id="testPosition" style= position: 'relative' >
            hello
            <Select
              getPopupContainer=() => document.getElementById("testPosition")
              style= width: 100 >
              <Option value="jack">jack</Option>
              <Option value="lucy">lucy</Option>
              <Option value="yiminghe">yiminghe</Option>
            </Select>
          </div>

Demo

【参考方案2】：

使用 ant design 4.5.3 版，将它与 AutoComplete 一起使用，它对我的​​工作方式是以不同的方式使用 getPopupContainer，就像他们在他们的website:

<AutoComplete
    getPopupContainer=(trigger) => trigger.parentElement
    ...
/>

如果没有这个，元素会在正文的末尾创建，并且不会滚动。这样，它就会在父级下方创建，并且滚动按预期工作。