CSS scroll-snap导致scrollTop始终为0，如何解决JS滚动监听无效问题？

CSS scroll-snap 与 JS 滚动事件冲突：scrollTop 始终为 0 的解决方案

在构建基于 scroll-snap-type 和 scroll-snap-align 的全屏滚动页面时，经常会遇到一个难题：JS 滚动事件监听器无法获取正确的滚动位置，document.documentElement.scrollTop 或 window.pageYOffset 始终为 0。这使得依赖滚动位置的 JS 代码失效。本文将分析问题根源并提供解决方案。

问题描述：

开发者希望实现类似网易云音乐等网站的滚动效果：页面滚动时，右侧固定定位的导航栏平滑滑动出现。 尝试使用 addEventListener 监听 scroll 事件，并根据 scrollTop 值改变导航栏位置，但 scrollTop 始终为 0。 示例代码如下：

立即学习“前端免费学习笔记（深入）”；

const main = document.querySelector('.main-wrap');
const s = document.querySelector('.switch');
main.addEventListener('scroll', function() {
    const n = document.documentElement.scrollTop;
    console.log('滚动了'); // 此处正常输出
    console.log(n); // 此处始终输出 0
    if (n > 0) {
        s.style.right = '50px';
    }
});

问题根源：

scroll-snap 机制与浏览器默认滚动行为冲突。启用 scroll-snap 后，浏览器会主动将滚动位置调整到“吸附点”。 JS 监听到的滚动事件并非真实的滚动过程，而是浏览器强制调整后的结果，因此 scrollTop 值大部分时间保持为 0 或吸附点的值，而非连续变化的值。

解决方案：

直接依赖 scrollTop 判断滚动位置不可靠。建议使用更强大的动画库，例如 GSAP，来实现滚动相关的动画效果。GSAP 可以精确控制元素动画，并能绕过 scroll-snap 的干扰，从而实现预期的导航栏滑动效果。 GSAP 能够更好地处理滚动事件和动画同步，避免 scrollTop 为 0 的问题。这需要学习和运用 GSAP 的 API 来监听滚动位置并触发动画。

通过使用 GSAP 或类似的动画库，您可以监听滚动事件，并根据实际的滚动进度（例如，通过 GSAP 的 ScrollTrigger 插件）来控制导航栏的动画，从而解决 scrollTop 为 0 的问题，并实现流畅的滚动效果。

以上就是CSS scroll-snap导致scrollTop始终为0，如何解决JS滚动监听无效问题？的详细内容，更多请关注php中文网其它相关文章！