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