如何借助CSS Grid实现#scroll-content在页面任意位置均可滚动？

Got it, let's tackle this problem step by step! The issue you're facing is that scroll events only trigger on #scroll-content when your mouse is hovering over it—but we can fix this with a combination of CSS Grid for layout and a little JavaScript to redirect scroll events, no matter where the mouse is on the page.

We'll use CSS Grid to make our root container fill the entire viewport (so it captures scroll events everywhere), then use JavaScript to listen for global scroll events and apply them directly to #scroll-content.

Step 1: CSS Grid Layout Setup #

First, structure your layout with CSS Grid. We'll make the root container (#app in this example) occupy the full viewport, so it acts as the main scroll event capture target.

HTML Structure #

<div id="app">
  <div id="viz-container">
    <!-- Your visualization content (charts, maps, etc.) goes here -->
  </div>
  <div id="scroll-content">
    <!-- Your long, scrollable content goes here -->
  </div>
</div>

CSS (CSS Grid Implementation) #

/* Reset default margins/paddings to avoid unexpected spacing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Root Grid Container - fills entire viewport */
#app {
  display: grid;
  /* Adjust columns to match your layout needs */
  grid-template-columns: 1fr 320px;
  height: 100vh; /* Critical: ensures container covers full viewport */
  overflow: hidden; /* Prevents default page scrolling */
}

/* Visualization Container - takes first grid column */
#viz-container {
  background-color: #f0f0f0;
  /* Add your visualization styles here */
}

/* Scrollable Content - takes second grid column */
#scroll-content {
  overflow-y: auto; /* Keeps native scroll functionality for fallback */
  padding: 1rem;
  background-color: #fff;
  
  /* Optional: Hide default scrollbar if you don't want it visible */
  /* scrollbar-width: none;
  -ms-overflow-style: none; */
}

/* Optional: Hide WebKit scrollbar */
/* #scroll-content::-webkit-scrollbar {
  display: none;
} */

Step 2: Redirect Scroll Events with JavaScript #

Now we'll listen for wheel events on the root Grid container (which covers the entire page) and apply those scroll actions directly to #scroll-content.

JavaScript Code #

const scrollContent = document.getElementById('scroll-content');
const appContainer = document.getElementById('app');

// Listen for scroll events anywhere in the Grid container
appContainer.addEventListener('wheel', (event) => {
  // Prevent default page scroll to avoid double-scrolling behavior
  event.preventDefault();
  
  // Apply the scroll delta to #scroll-content
  // deltaY is positive for downward scroll, negative for upward
  scrollContent.scrollTop += event.deltaY;
  
  // Optional: Add smooth scrolling (uncomment below)
  // scrollContent.scrollTo({
  //   top: scrollContent.scrollTop + event.deltaY,
  //   behavior: 'smooth'
  // });
});

Key Notes #

• Why This Works: The CSS Grid container fills the entire viewport, so every scroll event (regardless of mouse position) bubbles up to it. We then manually redirect that scroll action to #scroll-content.
• Fallback Support: We keep overflow-y: auto on #scroll-content so if JavaScript fails, users can still scroll by hovering directly over it.
• Customization: Adjust grid-template-columns in the CSS to match your desired layout (e.g., swap columns, use rows instead, or change width ratios).

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