flexbox实现的WooCommerce商品画廊横向滚动无法响应鼠标滚轮问题

问题原因 #

浏览器默认鼠标滚轮事件优先响应页面垂直滚动，横向滚动容器默认不会拦截滚轮事件转为横向滚动偏移。

解决方案 #

方案1：JS兼容实现（全浏览器支持）

给目标容器绑定wheel事件，将垂直滚动量转换为横向滚动偏移，代码可直接加到主题自定义JS或者WooCommerce自定义脚本区域：

const thumbSlider = document.querySelector('.flex-control-thumbs');
if (thumbSlider) {
  thumbSlider.addEventListener('wheel', (e) => {
    // 阻止默认垂直滚动行为
    e.preventDefault();
    // 可自定义滚动速度，数值越大滚动越快
    const scrollSpeed = 2;
    thumbSlider.scrollLeft += e.deltaY * scrollSpeed;
  }, { passive: false });
}

方案2：CSS增强（配合JS使用优化体验）

给原有CSS补充以下属性，优化滚动手感：

.woocommerce div.product div.images .flex-control-thumbs {
  overflow-y: hidden; /* 禁止垂直方向滚动偏移 */
  scroll-behavior: smooth; /* 滚动平滑效果 */
  overscroll-behavior-x: contain; /* 滚动到边缘时不触发页面整体回弹 */
}

验证方式 #

添加代码后清空站点缓存，鼠标悬停在缩略图区域滚动滚轮，即可触发横向滚动。

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