使用 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 分钟前
Vue3 全局 API 转移详解
前端·javascript·vue.js·vue3·api
史上最菜开发15 分钟前
a-input输入框,苹果电脑(MAC)输入法的输入Bug
vue.js·macos·bug
Eme丶1 小时前
Nginx部署vue以及转发配置记录
前端·vue.js·nginx
回忆哆啦没有A梦4 小时前
Vue页面回退刷新问题解决方案:利用pageshow事件实现缓存页面数据重置
前端·vue.js·缓存
A_ugust__5 小时前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生5 小时前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js
小菜全7 小时前
《React vs Vue:选择适合你的前端框架》
vue.js·react.js·前端框架
真的想不出名儿10 小时前
vue项目引入字体
前端·javascript·vue.js
笨蛋不要掉眼泪10 小时前
SpringBoot项目Excel成绩录入功能详解:从文件上传到数据入库的全流程解析
java·vue.js·spring boot·后端·spring·excel
奶糖 肥晨13 小时前
Uniapp 开发中遭遇「可选链赋值」语法陷阱:一次编译错误排查实录
javascript·vue.js·uni-app