React组件使用scrollIntoView或锚点标签无法滚动至指定元素

问题分析 #

你尝试的两种方法失效的原因分别是：

1. scrollIntoView + setTimeout：固定延迟无法和React的DOM渲染周期同步，可能在骨架元素还未完成渲染/布局时执行滚动，导致无法定位到目标元素。
2. 锚点标签包裹提交按钮：表单提交的默认行为会干扰锚点跳转，且当loading为false时目标元素不存在，锚点逻辑完全失效。

修复方案 #

方法1：用useEffect监听loading状态（推荐） #

利用React的useEffect监听loading状态变化，确保在骨架元素渲染完成后执行滚动操作，完全同步React的渲染周期：

import { useEffect, useRef, useState } from 'react';

function YourFormComponent() {
  const skeletonRef = useRef(null);
  const formRef = useRef(null);
  const [loading, setLoading] = useState(false);

  // 模拟提交逻辑
  const handleSubmit = async (data) => {
    setLoading(true);
    try {
      // 替换为你的API调用或业务逻辑
      await new Promise(resolve => setTimeout(resolve, 1000));
    } catch (err) {
      console.error(err);
    } finally {
      // 若需要停止加载，在此处设置setLoading(false)
    }
  };

  const handleFormSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(formRef.current);
    const data = Object.fromEntries(formData.entries());
    await handleSubmit(data);
  };

  // 当loading变为true时，执行平滑滚动
  useEffect(() => {
    if (loading && skeletonRef.current) {
      skeletonRef.current.scrollIntoView({
        behavior: 'smooth',
        block: 'start' // 可选，控制滚动到元素顶部/中心/底部
      });
    }
  }, [loading]);

  return (
    <>
      <form ref={formRef} onSubmit={handleFormSubmit} className="space-y-4">
        {/* 表单输入项 */}
        <input type="text" name="content" className="border p-2 rounded" />
        <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded">
          Generate
        </button>
      </form>

      {loading && (
        <div 
          id="loading-skeleton" 
          ref={skeletonRef} 
          className="mt-8 p-4 border rounded animate-pulse bg-gray-100"
        >
          {/* 骨架内容示例 */}
          <div className="h-4 bg-gray-300 rounded w-3/4 mb-2"></div>
          <div className="h-4 bg-gray-300 rounded w-full mb-2"></div>
          <div className="h-4 bg-gray-300 rounded w-5/6"></div>
        </div>
      )}
    </>
  );
}

export default YourFormComponent;

方法2：处理滚动容器的特殊情况 #

如果骨架元素嵌套在自定义滚动容器（如设置了overflow: auto的div）内，需要针对容器执行滚动，而非全局window：

const containerRef = useRef(null);

useEffect(() => {
  if (loading && skeletonRef.current && containerRef.current) {
    // 计算骨架元素相对于容器的位置
    const skeletonRect = skeletonRef.current.getBoundingClientRect();
    const containerRect = containerRef.current.getBoundingClientRect();
    const scrollTop = skeletonRect.top - containerRect.top + containerRef.current.scrollTop;

    containerRef.current.scrollTo({
      top: scrollTop,
      behavior: 'smooth'
    });
  }
}, [loading]);

// 对应JSX
<div ref={containerRef} className="h-96 overflow-auto">
  {/* 其他内容 */}
  {loading && (
    <div id="loading-skeleton" ref={skeletonRef} className="...">
      {/* 骨架内容 */}
    </div>
  )}
</div>

关键注意事项 #

• 确保skeletonRef正确绑定到目标元素，且该元素仅在loading为true时渲染。
• 若使用类组件，可将useEffect替换为componentDidUpdate生命周期钩子，监听loading状态变化。

内容的提问来源于stack exchange，提问作者ans_87l