javascript - CSS scroll-snap与JS滚动事件冲突，如何修复滚动时scrollTop始终为0的问题【自动生成的标题 俺不懂啊】？

Question

【css js】使用 scroll-snap-type和scroll-snap-align写了一个整屏滚动页面，用js写页面滚动事件时被卷去的头部一直为0，不知道怎么办？
想实现的功能是：当页面开始滚动时，一个固定定位的盒子位置改变。
类似于蛋仔网站https://party.163.com/ 当页面滚动时右侧导航栏向左滑动出现。
求求了看看我吧纯自学好难啊谢谢大家！

  <script>
        // 1.导航栏向左滑动出现模块
        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'
            }
        })
    </script>

omg AI好牛 怎么办怎么办有了AI要我何用

Answer 1

回答：此时你这个需求比较适合用GSAP来实现，可以参考渡一web袁老师讲的一个示例

Answer 2

当你在一个使用了 CSS scroll-snap 的页面上尝试通过 JavaScript 监听滚动事件并获取滚动位置时，可能会遇到 scrollTop 或 pageYOffset 始终为 0 的情况。这通常是因为滚动事件是在一个滚动容器内部触发的，而不是在 document.documentElement 或 window 上。

由于你提到了 scroll-snap，我猜测你的滚动事件可能是在一个具有滚动能力的容器元素（如 .main-wrap）上触发的，而不是在文档的根元素上。为了修复这个问题，你应该在 .main-wrap 上添加滚动事件监听器，并检查该元素的 scrollTop 属性。

这里是修改后的代码示例：

<script>
    // 1. 导航栏向左滑动出现模块
    const main = document.querySelector('.main-wrap'); // 假设这是你的滚动容器
    const s = document.querySelector('.switch');

    // 在 main 上添加滚动事件监听器，而不是在 document.documentElement 上
    main.addEventListener('scroll', function () {
        // 使用 main 的 scrollTop 而不是 document.documentElement.scrollTop
        const n = this.scrollTop; // 'this' 在这里指的是 main
        console.log('滚动了');
        console.log(n); // 这里将输出实际的滚动位置

        if (n > 0) {
            s.style.right = '50px';
        } else {
            // 可能还需要一个条件来处理滚动回顶部时的情况
            s.style.right = 'initial'; // 或者你想要的任何默认位置
        }
    });
</script>

请注意，如果 .main-wrap 没有滚动条（即其内容没有超出其可视区域），那么滚动事件将不会触发。确保 .main-wrap 的高度足够大，或者至少有一个可以滚动的子元素。

另外，你还需要确保 .main-wrap 的 overflow 属性设置为 auto 或 scroll，以便它可以有滚动条并触发滚动事件。

最后，如果你想要实现类似于蛋仔网站那样的导航栏效果，你可能还需要添加一些过渡效果（使用 CSS transition 属性）来平滑地改变 .switch 的位置。