页面加载时年龄验证弹窗导致小屏内容无法滚动的技术求助

I’ve run into this exact problem before—fixed-position overlays can be tricky when content overflows on mobile. Here’s how to keep your #auroraOverlayContent horizontally centered while fixing the scroll issue:

Step 1: Adjust the Overlay Container CSS #

First, update your overlay styles to use flexbox for reliable horizontal centering, and add padding to prevent content from touching screen edges:

#auroraOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000; /* Your black background */
  display: flex;
  justify-content: center; /* Ensures horizontal centering */
  align-items: flex-start; /* Aligns content to top (vertical position doesn’t matter per your request) */
  padding: 2rem 1rem; /* Adds buffer to avoid edge clipping on small screens */
  box-sizing: border-box; /* Makes sure padding doesn’t expand the overlay beyond the viewport */
  z-index: 9999; /* Keeps overlay above all other content */
}

Step 2: Make the Content Container Scrollable #

Next, style the content div to handle overflow internally—so when content is taller than the viewport, the content itself scrolls instead of the useless black background:

#auroraOverlayContent {
  background-color: #fff; /* Your content background color */
  width: 100%;
  max-width: 500px; /* Optional: sets a max width for larger screens */
  max-height: calc(100vh - 4rem); /* Subtracts overlay’s top/bottom padding to fit the viewport */
  overflow-y: auto; /* Enables vertical scroll only when content overflows */
  padding: 1.5rem;
  box-sizing: border-box;
}

Why This Works: #

• The fixed overlay still covers the entire screen, but flex: justify-content: center guarantees your content stays horizontally centered on every screen size.
• By containing scroll within the content div (using max-height and overflow-y: auto), we eliminate the problem of scrolling the background instead of the actual content.
• The calc(100vh - 4rem) calculation accounts for the overlay’s padding, so the content never spills beyond the bottom of the screen.

Bonus: Lock Background Scrolling (Optional) #

For a smoother experience, add a class to your <body> when the overlay is visible to prevent scrolling behind it:

body.overlay-active {
  overflow: hidden;
}

You can toggle this class with JavaScript when showing or hiding the overlay.

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