时间戳

首页 > 解决方案 > 在溢出的 React-Select 多选输入中滚动到底部

javascript - 在溢出的 React-Select 多选输入中滚动到底部

问题描述

我正在使用 React-Select v2.4.4。我正在尝试各种方法来将滚动条放在多选输入的底部，但它们似乎都不起作用。

沙盒链接：https ://codesandbox.io/s/react-codesandboxer-example-89cry

在上面的链接中，当我们Select All从下拉列表中选择选项时，滚动条应自动移动到底部并显示以下输入： 在此处输入图像描述

我尝试了 2 件事，但没有一个有效。

  1. 我尝试使用Ref以下代码：

    const scrollHeight = this.node.scrollHeight;
const height = this.node.clientHeight;
const maxScrollTop = scrollHeight - height;
this.node.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0;

  2. 通过 using 得到元素document.getElementById()，然后 used scrollIntoView。

    const element = document.getElementById("select");
element.scrollIntoView({
  behavior: "smooth",
  block: "end",
  inline: "nearest"
});

上述两种方法都存在于scrollToBottom函数中。

我有什么遗漏或做错了吗。

标签： javascriptreactjsdomreact-select

解决方案

我没有使用任何scrollHeightor就解决了它document.getElementById。

我确实通过了refto Select。

ref={component => {
          this.node = component;
    }}

然后我过去常常this.node.blur()把焦点移开，Input然后再把this.node.focus()焦点放在它上面。这样，当focus被带回 时Input，滚动将自动移至底部。

更新的代码在相同的代码沙箱中： https ://codesandbox.io/s/react-codesandboxer-example-89cry

您可以通过提供以下输入来尝试：

1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100

然后按tab或enter。您会注意到滚动条位于Input.

推荐阅读