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

作者

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

Scroll to an element on click in React

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

  1. ref在要滚动到的元素上设置一个道具。
  2. 在另一个元素上设置onClick道具。
  3. 每次单击元素时，调用对象scrollIntoView()上的方法
    ref。
应用程序.js
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属性被初始化为传递的参数。

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

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

我们onClick在按钮元素上设置了 prop，所以每次单击它时，
handleClick都会调用该函数。

应用程序.js
const handleClick = () => {
  ref.current?.scrollIntoView({behavior: 'smooth'});
};

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

该behavior属性指定滚动是平滑动画 ( smooth) 还是立即发生 ( auto)。

该behavior属性的默认值为auto。

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

–

发表评论