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

问题:

用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>
相关推荐
liangshanbo12155 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15887 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_7 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD7 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
要加油哦~8 小时前
JS | 知识点总结 - 原型链
开发语言·javascript·原型模式
哆啦A梦15889 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫9 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo9 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li9 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放