使用 Element UI -Container 布局容器时监听屏幕滚动无效

问题1:scroll 滚动事件不触发

js 复制代码
const handleScroll = () => {
  console.log('当前滚动位置:', window.scrollTop);
};
// 添加 scroll 监听事件
window.addEventListener('scroll', handleScroll);

原因: 由于事件的冒泡机制,scroll 滚动时需要考虑监听的元素是否真的在滚动,即内容区是否真的滚动

解决方法:捕获冒泡即可

js 复制代码
// 加上第三个参数,在捕获阶段去监听 scroll 事件
// 这样子可以保证页面内所有的 scroll 事件都能被监听到。
window.addEventListener('scroll', handleScroll,true);

参考文章:当我们发现scroll事件不触发之后我们应该做什么scroll事件不触发 为什么绑定的scroll事件失效了?为什么弹窗 - 掘金

问题2:scroll 被监听到,但是输出的位置始终为0

原因:我个人认为这个还是和问题1中没有正确监听内容区有关,我们输出的是 window.scrollTop,其结果始终为0,就证明 window 实际上并没有滚动,由于我们使用了 Container 容器进行布局,真正滚动的是应该就是 Container 容器

解决方法:

js 复制代码
// 在函数内添加参数,获取实际上的滚动内容区
const handleScroll = (e) => {
  console.log(e.target);
    // 输出结果为实际是滚动的内容区
};

此时就可以获取其滚动的实际位置了

js 复制代码
const handleScroll = (e) => {
  console.log('当前滚动位置:', e.target.scrollTop);
};

其实在问题1中,我们逐步排查内容区,监听实际滚动的元素即可,后续的问题2也不会出现。但是选择偷懒直接在捕获阶段进行监听,虽然可以监听到事件,输出的也是window 滚动的位置,并不是实际内容区

相关推荐
半花5 小时前
【Vue】defineProps、defineEmits 和 defineExpose
前端·vue.js
用户28003832908405 小时前
升级Vue3.4+版本,ant-design-vue 3.x 版本的Modal函数方式无法关闭问题
vue.js
小菜全5 小时前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
小菜全6 小时前
uniapp基础组件概述
前端·css·vue.js·elementui·css3
因吹斯汀8 小时前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程
崔璨8 小时前
详解Vue3的响应式系统
前端·vue.js
摸鱼的鱼lv8 小时前
🔥 Vue.js组件通信全攻略:从父子传值到全局状态管理,一篇搞定所有场景!🚀
前端·vue.js
lichong9518 小时前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之dist打包发布在Android工程asserts里
android·vue.js·iphone
超人不会飛9 小时前
vue3 markdown组件|大模型应用专用
前端·vue.js·人工智能