在 React 中单击时滚动到一个元素

在 React 中点击滚动到一个元素：

1. 在要滚动到的元素上设置 ref 属性。
2. 在另一个元素上设置 onClick 属性。
3. 每次点击元素时，调用 ref 对象的 scrollIntoView() 方法。

import {useRef} from 'react';

export default function App() {
  const ref = useRef(null);

  const handleClick = () => {
    ref.current?.scrollIntoView({behavior: 'smooth'});
  };

  return (
    <div>
      <button onClick={handleClick}>Scroll to element</button>

      <div style={{height: '155rem'}} />

      <div ref={ref}>Some content here</div>

      <div style={{height: '155rem'}} />
    </div>
  );
}

我们使用 useRef 钩子初始化了一个 ref。

useRef() 钩子可以传递一个初始值作为参数。 该钩子返回一个可变的 ref 对象，其 .current 属性被初始化为传递的参数。

请注意 ，我们必须访问 ref 对象的 current 属性才能访问我们设置 ref 属性的 div 元素。

当我们将 ref prop 传递给元素时，例如 <div ref={myRef} />，React 将 ref 对象的 .current 属性设置为对应的 DOM 节点。

我们在 button 元素上设置了 onClick 属性，所以每次点击它都会调用 handleClick 函数。

const handleClick = () => {
  ref.current?.scrollIntoView({behavior: 'smooth'});
};

在 handleClick 函数中，我们使用 scrollIntoView 方法滚动到设置了 ref 属性的 div 元素。

behavior 属性指定滚动应该平滑（smooth）还是立即发生（auto）。

behavior 属性的默认值为 auto。

每次单击按钮时，都会在我们设置了 ref 属性的元素上调用 scrollIntoView() 方法，并且该元素对用户可见。

火焰兔

海报 链接