ReactJS中如何实现不受设备高度影响的Y轴滚动定位？

一、抛弃硬编码滚动值，用Ref获取区块实时位置 #

硬写top:5235这类固定数值必然在不同设备上出错，因为区块的Y轴位置会随视口高度变化。正确做法是给每个区块绑定React Ref，点击菜单时直接获取元素的实际偏移量：

实现步骤： #

• 给每个垂直区块添加ref属性
• 点击菜单时，通过ref.current.offsetTop获取目标区块的顶部偏移值，再执行滚动

示例代码：

import { useRef } from 'react';

function YourComponent() {
  // 为每个区块创建ref
  const section1Ref = useRef(null);
  const section2Ref = useRef(null);
  const section3Ref = useRef(null);
  const section4Ref = useRef(null);

  // 滚动到指定区块的函数
  const scrollToSection = (ref) => {
    if (ref.current) {
      window.scrollTo({
        top: ref.current.offsetTop,
        behavior: 'smooth'
      });
    }
  };

  return (
    <>
      {/* 导航菜单 */}
      <nav>
        <NavItem onClick={() => scrollToSection(section1Ref)}>
          <AppText>区块1</AppText>
        </NavItem>
        <NavItem onClick={() => scrollToSection(section2Ref)}>
          <AppText>区块2</AppText>
        </NavItem>
        {/* 其他菜单项 */}
      </nav>

      {/* 垂直区块 */}
      <div ref={section1Ref} className="section">区块1内容</div>
      <div ref={section2Ref} className="section">区块2内容</div>
      <div ref={section3Ref} className="section">区块3内容</div>
      <div ref={section4Ref} className="section">区块4内容</div>
    </>
  );
}

二、优化菜单高亮逻辑，基于元素可见性判断 #

原来依赖固定滚动区间的高亮逻辑同样会在不同设备失效，推荐用Intersection Observer API监听区块是否进入视口，动态更新菜单状态：

示例代码：

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

function YourComponent() {
  const [activeSection, setActiveSection] = useState('section1');
  const sectionRefs = {
    section1: useRef(null),
    section2: useRef(null),
    section3: useRef(null),
    section4: useRef(null)
  };

  useEffect(() => {
    const observerOptions = {
      root: null,
      rootMargin: '-20% 0px -70% 0px', // 调整这个值控制触发高亮的时机
      threshold: 0.1
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          setActiveSection(entry.target.id);
        }
      });
    }, observerOptions);

    // 为每个区块添加监听
    Object.values(sectionRefs).forEach(ref => {
      if (ref.current) observer.observe(ref.current);
    });

    return () => {
      Object.values(sectionRefs).forEach(ref => {
        if (ref.current) observer.unobserve(ref.current);
      });
    };
  }, []);

  return (
    <>
      <NavItem onClick={() => scrollToSection(sectionRefs.section1)}>
        <AppText className={activeSection === 'section1' ? 'active' : ''}>
          区块1
        </AppText>
        {activeSection === 'section1' && <NavBottom />}
      </NavItem>
      {/* 其他菜单项 */}

      <div ref={sectionRefs.section1} id="section1" className="section">区块1内容</div>
      <div ref={sectionRefs.section2} id="section2" className="section">区块2内容</div>
      {/* 其他区块 */}
    </>
  );
}

三、用哈希路由实现单页内路由区分 #

如果需要通过路由链接直接定位到区块，可以结合React Router的哈希路由：

路由配置： #

// App.jsx
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import YourComponent from './YourComponent';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<YourComponent />} />
      </Routes>
    </Router>
  );
}

组件内处理哈希路由： #

import { useLocation, useEffect } from 'react-router-dom';

function YourComponent() {
  const location = useLocation();
  const sectionRefs = { /* ... 之前的ref定义 ... */ };

  // 页面加载或路由哈希变化时，自动滚动到对应区块
  useEffect(() => {
    const hash = location.hash.slice(1); // 去掉#号
    if (hash && sectionRefs[hash]) {
      scrollToSection(sectionRefs[hash]);
    }
  }, [location.hash]);

  // 菜单链接改为哈希形式
  return (
    <NavItem onClick={() => window.location.hash = '#section1'}>
      <AppText>区块1</AppText>
    </NavItem>
  );
}

这样既支持点击菜单滚动，也支持直接通过/#section2这种URL访问对应区块，同时不会破坏单页应用的结构。

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