CSS滚动条异常：隐藏水平滚动条时内容消失问题求助

Let’s break down what’s going wrong and fix your layout step by step:

Key Problems in Your Current Code #

• Unnecessary horizontal scrollbar: Setting position:absolute and width:100vw on html and body breaks the browser’s default layout behavior. 100vw includes the full viewport width, but if a vertical scrollbar is present, it takes up space—making 100vw wider than the actual usable area, which triggers horizontal scrolling.
• Broken scrollbar hiding: The selector ::-webkit-scrollbar:horizontal isn’t valid syntax for targeting horizontal scrollbars. Using this incorrectly can cause unexpected layout bugs (like your content disappearing).
• Fragile centering: Using margin-left:10vw to center your .box elements works in theory, but it’s not reliable—if your container’s width ever changes, the centering will break. A better approach is using automatic horizontal margins.

Corrected Code #

HTML (no changes needed here)

<html> 
<head> </head> 
<body> <div id="container"></div> </body> 
</html>

CSS (fixed layout & scrollbar behavior)

* { 
  outline: none; 
  transition: 1s; 
  /* Add box-sizing to prevent margin/padding from breaking widths */
  box-sizing: border-box;
} 

/* Hide horizontal scrollbar while keeping vertical scroll active */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* This reliably hides horizontal scroll */
  min-height: 100vh; /* Ensure body covers full viewport height */
}

#container {
  background-color: black;
  width: 100%; /* Use % instead of vw to avoid overflow issues */
  min-height: 100vh; /* Keep container full height initially */
}

.box {
  width: 80vw; /* Fixed width as requested */
  height: auto; /* Height adapts to content */
  margin: 10vh auto 0; /* 10vh top margin, auto left/right for perfect centering */
  text-align: center;
  font-size: calc(2vh + 2vw);
  background-color: white;
  padding: 1rem; /* Optional: add padding to prevent text touching edges */
}

/* Optional: Style vertical scrollbar (if needed) */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: #666;
  border-radius: 4px;
}

JavaScript (minor optimization)

const array = ['cat', 'dog', 'lion', 'tiger', 'snake'];
// Get container once outside the loop for better performance
const container = document.getElementById("container");

for (let i = 0; i < 50; i++) { 
  const randomIndex = Math.floor(Math.random() * array.length); 
  const animal = array[randomIndex]; 
  container.innerHTML += `<div class="box">${animal}</div>`; 
}

What Changed & Why #

1. Removed absolute positioning from html/body: Let the browser handle default layout, which eliminates the 100vw overflow issue.
2. Used overflow-x: hidden on html/body: This is the most reliable way to hide horizontal scrollbars without breaking content visibility.
3. Centered .box with margin: auto: Automatically calculates equal left/right margins, ensuring perfect centering regardless of viewport size.
4. Added box-sizing: border-box: Prevents padding/margins from adding extra width to elements, which avoids unexpected overflow.
5. Optimized JS: Moved the container selector outside the loop to avoid querying the DOM 50 times (small performance boost).

Now your .box elements will stay horizontally centered, the container will show only a vertical scrollbar when content overflows, and no unwanted horizontal scrollbar will appear.

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