Fancybox 3缩略图滚动条适配问题：小屏纵向缩略图仍显横向滚动条

Hey there, let's get that scrollbar behaving correctly on small screens for your Fancybox 3 (v3.3.5) setup! The issue you're seeing happens because Fancybox's default responsive switch only adjusts the thumbnail layout direction, but doesn't update the scroll container's overflow settings to match. Here are two reliable fixes:

1. Custom CSS Media Query (Simplest Approach) #

Add this CSS to your stylesheet to force the correct scroll behavior when the screen is under 800px:

@media (max-width: 799px) {
  /* Adjust scroll container to vertical scroll */
  .fancybox-thumbs {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Set a reasonable max height for vertical scrolling */
    max-height: 200px;
  }

  /* Ensure thumbnail list stays in vertical layout (redundant if your existing setup works, but safe to include) */
  .fancybox-thumbs > ul {
    flex-direction: column !important;
    width: auto !important;
  }
}

The !important flag helps override any inline styles Fancybox applies dynamically. Tweak the max-height value to fit your design needs.

2. JavaScript Event Listener (More Dynamic Control) #

If CSS alone doesn't cut it (maybe Fancybox is overriding styles too aggressively), use this jQuery snippet to listen for Fancybox's resize event and adjust styles on the fly:

$(document).on('fancybox-resize', function() {
  const viewportWidth = $(window).width();
  const thumbsContainer = $('.fancybox-thumbs');
  const thumbsList = thumbsContainer.find('ul');

  if (viewportWidth < 800) {
    // Switch to vertical scroll and layout
    thumbsContainer.css({
      'overflow-y': 'auto',
      'overflow-x': 'hidden',
      'max-height': '200px'
    });
    thumbsList.css({
      'flex-direction': 'column',
      'width': 'auto'
    });
  } else {
    // Revert to horizontal scroll and layout for larger screens
    thumbsContainer.css({
      'overflow-x': 'auto',
      'overflow-y': 'hidden',
      'max-height': 'none'
    });
    thumbsList.css({
      'flex-direction': 'row',
      'width': '100%'
    });
  }
});

Make sure jQuery is loaded before this script (since Fancybox 3 relies on jQuery, you probably already have it included).

Quick Note on Root Cause #

Fancybox's built-in responsive handling for thumbnails toggles the flex direction of the thumbnail list, but forgets to update the parent container's overflow properties. That's why the scrollbar stays horizontal even when the layout switches vertical—we're just manually syncing those two settings.

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