使用 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);

原因：我个人认为这个还是和问题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 滚动的位置，并不是实际内容区