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

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

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

解决方法：捕获冒泡即可

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

问题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 滚动的位置，并不是实际内容区