javascript - 如何获取滚动条以在div内查看

Question

我有一个输入框和搜索结果 div，每当我输入内容时我都可以看到结果，但是当我通过按键进行导航时，滚动查看不会发生。

我怎样才能实现这个目标。我已经在codesanbox中创建了工作示例.

场景

1. 在输入框中输入“1”
2. 点击向下箭头键直到第三个元素，您将能够看到红色 css 作为突出显示，但之后导航正在进行但滚动没有发生

任何帮助

Answer 1

这是您更新的沙盒好友:https://codesandbox.io/s/react-codesandbox-5fvk9

我添加的主要内容是 ref 创建逻辑。

在组件和 render() 外部，我们定义一个数组来跟踪所有引用。

  itemRefs = []

通过传入每个标签中可用的 ref 属性，该数组会填充到 .map() 中。

{searchResults.map((item, index) => {
    return (
      <li
         ref={ref => (this.itemRefs[index] = ref)}
         onClick={() => this.goToItem(index)}
         className={cursor === index ? 'active' : null}
      >
        <label className="first-lb">{item.id}</label>
        <label className="second-lb">{item.name}</label>
        <label className="third-lb">{item.address}</label>
      </li>
    )
})}

然后我们有一个接受引用索引的 onClick 处理程序，我们用它来滚动到所选项目。

  goToItem = index => {
    if (this.itemRefs[index]) {
      this.itemRefs[index].scrollIntoView({behavior: 'smooth', nearest: "block"})
    }

    this.setState({
      cursor: index,
    })
  }

此外，还可以处理向下箭头键和向上箭头键上的滚动事件。

  _keyDownOnSearchResults = e => {
    const {cursor, searchResults} = this.state
    if (e.keyCode === 38 && cursor > 0) {
      this.itemRefs[cursor - 1].scrollIntoView({
        behavior: 'smooth',
        nearest: 'block',
      })
      this.setState(prevState => ({
        cursor: prevState.cursor - 1,
      }))
    } else if (e.keyCode === 40 && cursor < searchResults.length - 1) {
      this.itemRefs[cursor + 1].scrollIntoView({
        behavior: 'smooth',
        nearest: 'block',
      })
      this.setState(prevState => ({
        cursor: prevState.cursor + 1,
      }))
    }
  }