javascript - ref.current.scrollLeft 返回未定义

Question

我有一段代码：

`function App() {
  const myRef = useRef(null);

  const onWheel = e => {
    e.preventDefault();

    const containerScrollPosition = myRef.current.scrollLeft;

    inputEl.current.scrollTo({
      top: 0,
      left: containerScrollPosition + e.deltaY * 0.35,
      behaviour: "smooth"
    });
  };

  return (
    <div
      className="App"
      style={{
        height: 440,
        width: "100%"
      }}
      onWheel={onWheel}
    >
      <AutoSizer>
        {({ height, width }) => (
          <List
            ref={myRef}
            height={height}
            itemCount={30}
            itemSize={600}
            layout="horizontal"
            width={width}
          >
            {Grid}
          </List>
        )}
      </AutoSizer>
    </div>
  );
}

当我myRef用于List组件时，myRef.current.scrollLeft/myRef.current.clientHeight返回undefined（myRef.current返回正确的组件节点）。如果我使用myRef一切div.App顺利。可能是什么问题呢？

Answer 1

List ref 不是 dom 节点，也没有 scrollLeft 属性。您可以使用存储在其状态中的列表的滚动偏移量。

  const handleScrollLeft = () => {
      let scrollPosition = listRef.state.scrollOffset - 50 
      listRef.scrollTo(scrollPosition)
  }