如何将鼠标滚轮作用范围限定到特定DIV？附水平图片列表代码

阿华AIGC实验室

2026-5-22

解决鼠标滚轮仅作用于特定水平滚动容器的问题

我来帮你搞定这个需求！你已经搭好了水平滚动的图片列表框架，只需要完善滚轮事件的处理逻辑，就能把滚轮作用严格限定在这个特定容器#q里，不会触发整个页面的滚动。

完整实现方案

1. 优化容器基础样式（你的代码基础上微调）

你的容器样式已经满足水平滚动的核心需求，这里补充几个细节优化体验：

<ul id="q" class="list-inline" style="white-space: nowrap; overflow-x: scroll; padding: 5px; height: 120px; /* 固定容器高度，适配图片+内边距 */">
  <li v-for="index in 20" :key="index" class="list-inline-item" style="display: inline-block; margin-right: 5px;">
    <img :src="`${$route.params.img}`" style="width: 100px; height: 100px; object-fit: cover;" />
  </li>
</ul>

小调整说明：把v-for="index in (0,20)"改成标准的v-for="index in 20"，display:inline换为inline-block避免列表项间隙问题，给图片加object-fit:cover防止拉伸变形，额外加了margin-right让图片间有间距更美观。

2. 完善滚轮事件监听（兼容全浏览器）

你用了jQuery的bind，现在更推荐用on方法，同时要兼容Firefox的特殊滚轮事件，核心是阻止页面默认滚动行为，并精准控制容器的水平滚动：

$(function() {
  $('#q').on('mousewheel DOMMouseScroll', function(e) {
    e.preventDefault(); // 关键：阻止默认的页面滚动，把滚轮行为锁在当前容器
    const $container = $(this);
    
    // 统一处理不同浏览器的滚轮方向值
    const delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;
    // 自定义滚动幅度，数值越大滚动越快，可根据需求调整
    const scrollStep = 30;

    // 根据滚轮方向调整容器的水平滚动位置
    if (delta > 0) {
      // 向上/向左滚动
      $container.scrollLeft($container.scrollLeft() - scrollStep);
    } else {
      // 向下/向右滚动
      $container.scrollLeft($container.scrollLeft() + scrollStep);
    }
  });
});