问题:
用elementplus实现的滚动条的页面中,滑动滚动条可以滚动,但是通过鼠标滑轮却无效,鼠标没有问题。
解决:
在开发者工具中, 元素->事件监听器中发现当我移除网页中祖先元素的滚动事件,该组件的滚动事件就可以生效了。
得知:由于我监听了祖先元素的滚动事件做了一些处理,所有该元素的滚动事件冒泡到了祖先元素,而祖先元素页面高度不够不能滚动,所以页面看起来没有改变。
办法:
给这个组件添加滚动事件,阻止事件冒泡到主页,就可以解决问题了。
代码:
<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>