ReactJS：隐藏元素滚动位置重置至顶部问题求助

Hey there! Let's work through this React sidebar problem you're facing—you’re totally right about the scroll position being the root cause, nice catch! Here’s how to fix both the hamburger icon disappearing mid-scroll and after page navigation:

1. Reset Scroll Position When the Sidebar Hides #

The core fix is making sure the sidebar’s scroll position jumps back to the top every time it gets hidden. Here are two straightforward ways to implement this:

Option 1: Use a Ref to Control the Sidebar Element #

If you’re using a functional component, leverage useRef to directly manipulate the sidebar’s scroll position:

import { useRef, useState } from 'react';

function App() {
  const [isSidebarVisible, setIsSidebarVisible] = useState(false);
  const sidebarRef = useRef(null);

  const toggleSidebar = () => {
    setIsSidebarVisible(prevState => {
      // Reset scroll only when we're hiding the sidebar
      if (prevState) {
        sidebarRef.current.scrollTop = 0;
      }
      return !prevState;
    });
  };

  return (
    <div className="app-wrapper">
      {/* Hamburger icon stays outside the scrollable sidebar */}
      <button onClick={toggleSidebar} className="hamburger-btn">
        {/* Your hamburger icon JSX here */}
      </button>
      
      <div 
        ref={sidebarRef}
        className={`sidebar ${isSidebarVisible ? 'show' : 'hide'}`}
      >
        {/* Your scrollable list of items */}
      </div>
      
      {/* Rest of your app content */}
    </div>
  );
}

Option 2: Reset Scroll on Route Changes (For React Router Users) #

If you’re using React Router for page navigation, add a listener to reset the sidebar’s state whenever the route changes:

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

function App() {
  const [isSidebarVisible, setIsSidebarVisible] = useState(false);
  const sidebarRef = useRef(null);
  const location = useLocation();

  useEffect(() => {
    // Hide sidebar and reset scroll when navigating to a new page
    if (isSidebarVisible) {
      sidebarRef.current.scrollTop = 0;
      setIsSidebarVisible(false);
    }
  }, [location.pathname, isSidebarVisible]);

  // ... rest of your component code
}

2. Double-Check the Hamburger Icon’s Position #

Make sure your hamburger icon isn’t nested inside the sidebar’s scrollable container! If it is, scrolling the sidebar will yank it out of view. Keep it in a fixed or non-scrolling parent:

.hamburger-btn {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100; /* Ensures it stays above the sidebar */
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 280px;
  overflow-y: auto; /* Only makes the sidebar content scrollable */
  /* Add your styling here */
}

Why This Works #

• Resetting scrollTop to 0 when hiding the sidebar ensures that next time it opens, it starts at the top—so the hamburger icon never gets pushed out of view by a scrolled-down menu.
• Keeping the hamburger icon outside the scrollable sidebar container prevents it from moving at all when you scroll through menu items.

Give these steps a shot, and your hamburger icon should stay visible no matter how much you scroll, and it won’t vanish after page jumps!

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