下拉选择框滚动异常：鼠标滚动时页面滚动而非选择框滚动

这是个挺常见的UI交互小坑，我来帮你搞定它！

问题原因 #

当<select>的下拉菜单展开时，鼠标滚轮事件默认会向上冒泡到document或body元素，导致页面跟着滚动，而不是被下拉菜单捕获来滚动选项。

原生Select的解决方案 #

我们可以通过监听鼠标悬停和滚轮事件，阻止事件冒泡并手动控制Select的选项滚动。下面是纯JavaScript的实现代码：

// 获取页面上所有需要处理的Select元素
const selectElements = document.querySelectorAll('select');

selectElements.forEach(select => {
  // 鼠标悬停在Select上时绑定滚轮事件
  select.addEventListener('mouseover', function() {
    const handleWheel = (wheelEvent) => {
      // 阻止滚轮事件冒泡到页面
      wheelEvent.stopPropagation();
      
      // 根据滚轮方向调整选中项索引
      const scrollStep = wheelEvent.deltaY > 0 ? 1 : -1;
      this.selectedIndex += scrollStep;
      
      // 确保索引在合法范围内
      if (this.selectedIndex < 0) this.selectedIndex = 0;
      if (this.selectedIndex >= this.options.length) this.selectedIndex = this.options.length - 1;
    };

    this.addEventListener('wheel', handleWheel);

    // 鼠标离开时移除滚轮事件监听，避免影响其他元素
    this.addEventListener('mouseout', () => {
      this.removeEventListener('wheel', handleWheel);
    });
  });
});

框架环境下的适配（以Vue为例） #

如果你用Vue这类前端框架，可以把逻辑整合到组件中：

<template>
  <div>
    <select @mouseover="bindSelectWheel" class="custom-select">
      <option v-for="item in firstOptions" :key="item.id" :value="item.value">{{ item.label }}</option>
    </select>
    <select @mouseover="bindSelectWheel" class="custom-select">
      <option v-for="item in secondOptions" :key="item.id" :value="item.value">{{ item.label }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstOptions: [],
      secondOptions: []
    };
  },
  methods: {
    bindSelectWheel(e) {
      const selectEl = e.target;
      const handleWheel = (wheelEvent) => {
        wheelEvent.stopPropagation();
        const scrollStep = wheelEvent.deltaY > 0 ? 1 : -1;
        selectEl.selectedIndex += scrollStep;
        
        // 边界控制
        selectEl.selectedIndex = Math.max(0, Math.min(selectEl.selectedIndex, selectEl.options.length - 1));
      };

      selectEl.addEventListener('wheel', handleWheel);

      // 鼠标离开或组件销毁时移除监听
      const removeListener = () => {
        selectEl.removeEventListener('wheel', handleWheel);
        selectEl.removeEventListener('mouseout', removeListener);
      };
      selectEl.addEventListener('mouseout', removeListener);
      this.$once('hook:beforeUnmount', removeListener);
    }
  },
  // 模拟API获取数据和级联逻辑
  mounted() {
    // 这里替换成你的API请求
    this.firstOptions = [{ id: 1, value: 'opt1', label: '选项1' }, { id: 2, value: 'opt2', label: '选项2' }];
  }
};
</script>

关键说明 #

1. 阻止事件冒泡：通过wheelEvent.stopPropagation()避免滚轮事件传递给页面元素，这是解决问题的核心。
2. 手动控制选中项：部分浏览器（比如Firefox）不会自动捕获滚轮事件来滚动Select选项，所以我们手动调整selectedIndex来模拟原生滚动行为。
3. 清理事件监听：鼠标离开Select时移除滚轮事件，防止影响页面其他区域的滚轮操作，同时在组件销毁时也要清理监听避免内存泄漏。

如果你的Select是自定义组件（用div等元素模拟的下拉框），处理逻辑更简单：直接给下拉菜单的容器绑定wheel事件并阻止冒泡即可，因为自定义组件的事件完全可控。

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