Material Design列表组件添加独立滚动条的技术求助

Hey there! Let's sort out that scrolling problem with your Material Design list. I get it—when the list grows long, having the whole page scroll including the header is super annoying. Here's exactly how to add that independent scroll (what you're calling a "secondary scrollbar") just for the list:

The core idea is to contain the scrollable area strictly within your list component, so your page header stays locked in place while the list content rolls. Let's break this down step by step:

Step 1: Give your list container a defined height (or max-height) #

Browsers only enable scrolling on an element if it knows where to "cut off" the content. So first, set a max-height for your list's wrapper—this should be the space you want the list to occupy without pushing the header. For example, if your header is 120px tall, you can use viewport units to make the list take up the rest of the screen:

/* Target the wrapper around your Material Design list */
.mdc-list-wrapper {
  /* Adjust the value to match your header height */
  max-height: calc(100vh - 120px);
  /* Turn on vertical scrolling when content exceeds the max height */
  overflow-y: auto;
  /* Hide horizontal scroll if your list doesn't need it */
  overflow-x: hidden;
}

Step 2: Make sure the list fits inside the wrapper #

Material Design lists have some default margins and spacing—let's override those to ensure the list doesn't spill outside its container:

/* Target the actual Material Design list element */
.mdc-list {
  height: 100%;
  margin: 0;
}

Step 3: Lock your header in place (if it isn't already) #

If your header is still scrolling with the page, you need to make it sticky so it stays anchored at the top:

.page-header {
  position: sticky;
  top: 0;
  z-index: 10; /* Ensures the header stays above the list */
  background-color: #ffffff; /* Match your page background to avoid transparency gaps */
}

How this works #

By setting overflow-y: auto on the list wrapper, we tell the browser to only scroll the content inside that wrapper when it's too tall to fit. The sticky header will stay fixed at the top of the viewport, while the list scrolls independently below it—exactly the effect you're looking for.

Quick troubleshooting tips #

• If the scroll still isn't contained, double-check that your list wrapper has a clear height or max-height (without this, overflow-y won't do anything).
• Make sure no parent elements have overflow: hidden—that could block the scroll from working.
• For responsive designs, use media queries to adjust the max-height value for different screen sizes (e.g., smaller mobile screens might need a different height).

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