检测到滚动时的 ScrollTop

Question

我想制作一个类似于此页面上的功能。 B&O BeoPlay A3

当您向下滚动时，它会自动一直滚动到下一页。

我一直在玩 window.pageYOffset。 到目前为止我有这个：

window.onscroll = scroll;

        function scroll () {
            setTimeout(function() {
                if (window.pageYOffset < 100 && window.pageYOffset > 2) {
                    scrollLogin();
                }
                else if (window.pageYOffset > 100 && window.pageYOffset < 159 && window.pageYOffset != 124) {
                    scrollSky();
                }
                else if (window.pageYOffset > 159 && window.pageYOffset < 248) {
                    scrollCity();
                }
            },500);
        }
        function scrollLogin() {
            $('html,body').animate({
                scrollTop: $("#login").offset().top
            }, 500);
        }
        function scrollSky() {
            $('html,body').animate({
                scrollTop: $("#skyContainer").offset().top
            }, 500);
        }
        function scrollCity() {
            $('html,body').animate({
                scrollTop: $("#city").offset().top
            }, 500);
        }

问题是这种方式根本无法无缝运行。我必须等待 500 毫秒才能再次滚动。如果这也仅适用于固定的屏幕分辨率。 您知道存档此功能的更好方法吗？这也允许百分比测量，以便在不同分辨率的显示器上工作？

Link to my attempt.

所以我想要视口坚持的 3 个状态：顶部（登录栏）、中间（天空动画）和底部（搜索栏）。

非常感谢！

编辑：

采取 2：

我创建了一个变量来告诉我动画是否结束。它只是在动画打开时将值设为“1”，这样可以防止各种混乱。

所以我的脚本现在运行良好。唯一的问题是它只适用于我的 innerHeight 和 innerWidth。 (innerHeight: 863 - innerWidth: 1440)。

有没有办法以百分比形式制作 window.pageYOffset？ 这是存档此效果的最佳方式吗？

谢谢你，祝你有美好的一天。

这是我的新代码：

window.onscroll = scroll;

        var animationIsOn = 0;

        function scroll () {
            if (animationIsOn == 0) {
                var pageY = window.pageYOffset;
                if (pageY < 119 && pageY > 69) {
                    scrollLogin();
                }
                else if (pageY > 5 && pageY < 69 || pageY > 179 && pageY < 254) {
                    scrollSky();
                }
                else if (pageY > 129 && pageY < 179) {
                    scrollCity();
                }
            }
        }
        function scrollLogin() {
            animationIsOn = 1;
            $('html,body').animate({
                scrollTop: $("#login").offset().top
            }, 500, function() {
                animationIsOn = 0;
            });
        }
        function scrollSky() {
            animationIsOn = 1;
            $('html,body').animate({
                scrollTop: $("#skyContainer").offset().top
            }, 500, function() {
                animationIsOn = 0;
            });
        }
        function scrollCity() {
            animationIsOn = 1;
            $('html,body').animate({
                scrollTop: $("#city").offset().top-600
            }, 500, function() {
                animationIsOn = 0;
            });
        }

Answer 1

要获得 pageYOffset 的百分比，只需将 pageYOffset 除以 document.documentElement.scrollHeight 并乘以 100。

编辑：Ckrill 发现他需要使用 window.innerHeight 而不是文档的 scrollHeight 属性。