使用粘性导航栏自动滚动 Flexbox 列

扩展@YellowAfterlife 的答案，我会使用 refs 而不是 document.getElementById。

此外，您只需要“移动”上的偏移量，因此您可以使用 react-responsive 之类的包。

import React,{ useRef,useState,useEffect } from "react";
import { Link } from "react-scroll";
import { useMediaQuery } from "react-responsive";

function App() {
  const items = ["item1","item2","item3","item4","item5","item6","item7"];
  const container = "scrollContainer";

  const menuRef = useRef(null);
  const [menuHeight,setMenuHeight] = useState(0);

  const isMobile = useMediaQuery({
    query: "(max-width: 767pX)"
  });

  useEffect(() => {
    setMenuHeight(menuRef.current.clientHeight);
  },[menuRef]);

  return (
    <main className="flex absolute right-0 bottom-0 left-0 top-0">
      <div
        id={Container}
        className="md:flex-row flex flex-col overflow-auto border border-box"
        style={{ flexBasis: "65%",flex: 2 }}
      >
        <div
          ref={menuRef}
          className="md:w-64 p-3 border sticky top-0 flex-shrink-0 bg-white border-box"
        >
          {items.map((item) => (
            <div className="cursor-pointer m-2 underline" key={item}>
              <Link
                to={item}
                smooth={truE}
                duration={500}
                spy={truE}
                containerId={Container}
                offset={isMobile ? -menuHeight : null}
              >
                {item}
              </Link>
            </div>
          ))}
        </div>

        <div style={{ flex: 1 }}>
          {items.map((item) => (
            <div key={item} id={item} className="h-64 border m-2 bg-gray-100">
              {item}
            </div>
          ))}
        </div>
      </div>
    </main>
  );
}

export default App;

这是Special Information Tone

react-scroll supports offset 参数，您可以使用它来动态计算菜单高度：

import { Link } from 'react-scroll';

function App() {

    const items = ['item1','item2','item3','item4','item5','item6','item7'];
    const container = "scrollContainer";
    const menu = "scrollMenu";

    function getScrollOffset() {
        if (true/* insert a condition for navbar being on top */) {
            return -document.getElementById(menu).offsetHeight;
        } else return 0;
    }

    return (
        <main className="flex absolute right-0 bottom-0 left-0 top-0">

            <div id={Container} className="md:flex-row flex flex-col overflow-auto border border-box" style={{ flexBasis: "65%",flex: 2}}>

                <div className="md:w-64 p-3 border sticky top-0 flex-shrink-0 bg-white border-box" id={menu}>
                    {items.map((item) => <div className="cursor-pointer m-2 underline" key={item}>
                        <Link to={item} smooth={truE} duration={500} spy={truE} offset={getScrollOffset()} containerId={Container}>{item}</Link>
                    </div>)}
                </div>

                <div style={{ flex: 1 }}>
                    {items.map((item) => <div key={item} id={item} className="h-64 border m-2 bg-gray-100" >{item}</div>)}
                </div>

            </div>

        </main>
    );
}

export default App;

考虑到滚动已经由 JavaScript 端处理，仅使用 CSS 的解决方案将远没有那么优雅，并且不会提供任何特别的好处。