Glightbox组件移动端水平滚动问题求助

I’ve helped several developers troubleshoot this exact horizontal scrollbar issue with Glightbox on mobile—it’s definitely a common pain point! Here are the most reliable fixes I’ve found:

• Lock viewport overflow at the root level
  Sometimes the scrollbar comes from the body/html element not restricting horizontal overflow. Add this to your global CSS first:

  html, body {
    overflow-x: hidden;
    width: 100%;
  }
  

  This ensures your base page doesn’t allow horizontal scrolling, which can interfere with Glightbox’s modal behavior.

• Restrict Glightbox container to viewport width
  Glightbox’s modal container can sometimes stretch beyond the mobile viewport. Target its core container class (usually .glightbox-container) with these styles:

  .glightbox-container {
    max-width: 100vw !important;
    overflow-x: hidden;
    left: 0 !important;
    right: 0 !important;
  }
  

  The !important might be necessary if Glightbox’s inline styles are overriding your custom CSS.

• Ensure media content is fully responsive
  If your slides include images, videos, or iframes, make sure they don’t force the container wider than the viewport:

  .glightbox-slide img,
  .glightbox-slide iframe,
  .glightbox-slide video {
    max-width: 100%;
    height: auto;
  }
  

  Fixed-width media elements are a frequent culprit here.

• Adjust Glightbox initialization settings
  Tweak your Glightbox config to prevent scroll-related conflicts. Try adding these options when initializing:

  const lightbox = GLightbox({
    preventScroll: true, // Locks background scroll when modal is open
    margin: 15, // Reduces side margins to avoid overflow on tight viewports
    touchNavigation: true, // Ensures touch swipes don't trigger page scroll
  });
  

• Debug with dev tools
  If none of the above work, open your browser’s mobile dev tools and inspect which element is causing the overflow. Look for elements with width values greater than 100vw or unexpected padding/margins pushing content sideways.

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