添加position:fixed到页眉后滚动条消失问题求助

Hey there! I see you're stuck with the scrollbar disappearing after adding position:fixed to your header—let's fix that up.

First, let's break down the issue: Your current CSS sets overflow: scroll on the body, but when you use position:fixed, the header is pulled out of the normal document flow. This can confuse the browser's calculation of the scrollable area, leading to the scrollbar vanishing unexpectedly.

Here's the fix, with clear explanations:

• Remove overflow: scroll from the body: By default, the browser handles scrolling for the body when content overflows. Forcing overflow: scroll can interfere with how the browser calculates scrollable space once fixed elements are in play.
• Add overflow: auto to the <html> element: This ensures the root element properly manages scrolling, resolving cases where the body's scrollbar fails to appear correctly.
• Optional: Add a z-index to your fixed header: This keeps your header above other content, a common best practice for fixed headers (not directly related to the scrollbar issue, but useful for overall layout).

Here's your updated CSS code:

html {
  overflow: auto;
}
body { 
  padding: 0; 
  margin-top: 35px; 
  /* Removed overflow: scroll */
}
.topBlack-container { 
  background-color: #333333; 
  height: 35px; 
  width: 100%; 
  position: fixed; 
  top: 0; 
  left: 0;
  z-index: 100; /* Ensures header stays above other content */
}
.topBlack-contents { 
  background-color: #333333; 
  margin: 0 auto; 
  max-width: 1050px; 
  border-color: blue; 
  height: 35px; 
}
.list-contents { 
  float: right; 
  padding-top: 7px; 
  padding-right: 7px; 
}
.list-contents a { 
  text-decoration: none; 
  text-align: center; 
  font-size: 12px; 
  font-family: "Arial"; 
  color: white; 
  padding-left: 20px; 
  margin-top: 5px; 
}
.list-contents a:hover { 
  text-decoration: underline; 
  text-align: center; 
  font-size: 12px; 
  font-family: "Arial"; 
  color: white; 
  padding-left: 20px; 
  margin-top: 5px; 
}

Your HTML can stay exactly as it is—no changes needed there.

The key tweak is letting the browser's default scrolling behavior take over instead of forcing overflow: scroll on the body. This should bring back your scrollbar while keeping the header fixed at the top as you scroll.

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