如何在不同高度浏览器中优化Lightbox显示与滚动效果

Let's break down how to fix both issues you're facing with your lightbox—double scrollbars and inaccessible buttons on smaller screens. These problems stem from conflicting overflow settings and container sizing, so we'll adjust your SCSS to resolve them cleanly.

1. Eliminating the Double Scrollbar #

The double scrollbar happens because two elements are set to scroll: the main <body> and your .image-button-container. When the lightbox is active, we want to lock the body from scrolling and only keep the scrollbar on the lightbox content container.

Solution Steps: #

• Disable body scrolling when the lightbox is open using the :target state
• Adjust the .image-button-container to use max-height instead of height: 100% to avoid forcing it to fill the entire viewport (which causes overflow conflicts)

2. Ensuring Buttons Are Scrollable #

The buttons are inaccessible because the .image-button-container's height setting was limiting how much content could be viewed. By tweaking the container's height, margins, and overflow behavior, we'll make sure all content (including the buttons) is reachable via scroll.

Modified SCSS Code #

Here's the updated SCSS with comments highlighting the key changes:

/** LIGHTBOX WEBSITE MARKUP **/
// Disable body scroll when lightbox is active
body:has(.lightbox:target) {
  overflow: hidden;
}

.lightbox {
  /** Default lightbox to hidden */
  display: none;
  /** Position and style */
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  // Use flex to center content vertically while allowing scroll
  display: flex;
  align-items: flex-start;
  padding-top: 1rem;
  overflow-y: auto; // Handle scroll for the entire lightbox if needed
}

.lightbox img {
  /** Pad the lightbox image */
  width: 100%;
  display: block;
  max-height: 70vh; // Limit image height to leave space for text/buttons
  object-fit: contain;
}

.image-button-container {
  width: 50%;
  margin: 0 auto;
  display: block;
  overflow: visible; // Remove internal scroll, let lightbox handle it
  max-height: calc(100vh - 2rem); // Leave space for top padding
  position: relative;
  background: white;
  padding: 1rem;
}

.lightbox .button-text-container {
  p {
    display: block;
    position: relative;
    margin-bottom: 1.5rem;
  }
  
  .buttons-container {
    display: flex;
    justify-content: center;
    gap: 1rem; // Cleaner spacing than margin
    
    .btn-dark {
      border: 3px solid white;
      padding: 0.5rem 1.5rem;
    }
  }
}

.lightbox:target {
  /** Unhide lightbox **/
  display: flex; // Maintain flex layout for proper positioning
}

Key Changes Explained: #

• Body Scroll Lock: body:has(.lightbox:target) uses the :has() selector to disable body overflow when the lightbox is open. For older browser support, you can use a JavaScript fallback to toggle a class on the body instead.
• Lightbox Flex Layout: Changing to display: flex ensures the content container is positioned correctly without forcing full height.
• Image Height Limit: max-height: 70vh prevents the image from taking up too much viewport space, leaving room for text and buttons.
• Content Container Adjustments: max-height: calc(100vh - 2rem) keeps the container within the viewport, and removing overflow: auto lets the lightbox handle scrolling if content exceeds viewport height.
• Button Spacing: Using gap in .buttons-container creates cleaner, more consistent spacing between buttons.

Optional JavaScript Fallback for Older Browsers #

If you need to support browsers without :has() support (like older Safari versions), add this script to toggle a body class when the lightbox opens/closes:

// Toggle body scroll class for lightbox
document.querySelectorAll('.lightbox').forEach(lightbox => {
  lightbox.addEventListener('click', (e) => {
    if (e.target === lightbox) { // Trigger only when clicking the overlay
      document.body.classList.toggle('lightbox-active');
    }
  });
});

document.querySelectorAll('.single-content a').forEach(link => {
  link.addEventListener('click', () => {
    document.body.classList.add('lightbox-active');
  });
});

Then update the SCSS to use the class instead of :has():

body.lightbox-active {
  overflow: hidden;
}

This setup will give you a single scrollbar (only on the lightbox when needed) and ensure all content—including your download and visit buttons—is fully accessible on small screens.

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