用el-scrollbar实现滚动条，拖动滚动条可以滚动，但是通过鼠标滑轮却无效

想自律的露西西★2024-11-23 21:04

问题：

用elementplus实现的滚动条的页面中，滑动滚动条可以滚动，但是通过鼠标滑轮却无效，鼠标没有问题。

解决：

在开发者工具中，元素->时间监听器中发现当我移除网页中祖先元素的滚动事件，该组件的滚动事件就可以生效了。

得知：由于我监听了祖先元素的滚动事件做了一些处理，所有该元素的滚动事件冒泡到了祖先元素，而祖先元素页面高度不够不能滚动，所以页面看起来没有改变。

办法：

给这个组件添加滚动事件，阻止事件冒泡到主页，就可以解决问题了。

代码：

javascript 复制代码

<template>
  <div class="commonLableMain">
    <el-scrollbar max-height="280px">
      <div class="labels" @wheel="handleComponentScroll">
        <div v-for="(item) in 17" :key="item">
          <Label/>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import Label from './label'
const handleComponentScroll = (event)=>{
    event.stopPropagation(); // 阻止事件冒泡到主页
  }

</script>