ReactJS v18 自动滑动到初始位置：加载完所有 Block 后跳转到指定 Block

在 ReactJS v18 中，可以使用 `useEffect` 钩子函数来实现在加载完所有 block 后自动滑向初始的 block。\n\n首先，你需要在组件中创建一个 ref 来引用要滑动到的 DOM 元素。然后，使用 `useEffect` 钩子函数来监听该 ref 对象的变化。当 ref 对象的值发生变化时，表示所有 block 已经加载完毕，此时可以执行滑动操作。\n\n以下是一个示例代码：\n\njsx\nimport React, { useEffect, useRef } from 'react';\n\nconst App = () => {\n const blockRef = useRef(null); // 创建一个 ref 对象\n\n useEffect(() => {\n // 当 ref 对象的值发生变化时执行滑动操作\n if (blockRef.current) {\n blockRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }\n }, [blockRef.current]);\n\n return (\n <div>\n {/* 横向分布的 10 个 block */}\n <div style={{ display: 'flex' }}>\n {Array.from({ length: 10 }, (_, index) => (\n <div key={index} style={{ width: '100px', height: '100px', border: '1px solid black' }}>\n {index + 1}\n </div>\n ))}\n </div>\n\n {/* 用于引用初始的 block */}\n <div ref={blockRef}></div>\n </div>\n );\n};\n\nexport default App;\n\n\n在上述代码中，我们创建了一个 `blockRef` 的 ref 对象，并将其绑定到最后一个 `

` 元素上。当所有 block 加载完毕后，`blockRef` 的值将被赋予最后一个 `

` 元素的 DOM 引用。\n\n然后，在 `useEffect` 钩子函数中，我们监听 `blockRef.current` 的变化。当其值发生变化时，表示所有 block 已经加载完毕，此时我们可以调用 `scrollIntoView` 方法来将初始的 block 滑动到可视范围内。\n\n在 `scrollIntoView` 方法中，我们使用了 `behavior: 'smooth'` 来实现平滑滚动效果，`block: 'nearest'` 则表示滚动到最近的可视位置。\n\n注意：需要在 React 组件中使用以上代码，并确保你的 React 版本支持 React Hooks。

原文地址: https://www.cveoy.top/t/topic/pFaB 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录