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个状态：顶部（登录栏），中间（天空动画）和底部（搜索栏）。

非常感谢！

编辑：

TAKE 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作为百分比，只需将documentYOffset除以document.documentElement.scrollHeight并乘以100即可。

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

检测到滚动时ScrollTop

1 个答案: