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

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

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

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

解决方法：捕获冒泡即可

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

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

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

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

解决方法：

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

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

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

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