当页面滚动到底部时，JavaScript scroll() 事件无限循环

Question

I made a page where every div is animated as soon as the window reaches it when user scrolls the page.我制作了一个页面，当用户滚动页面时，一旦 window 到达它，每个div就会被动画化。 I used jQuery to handle the scroll() event.我使用 jQuery 来处理scroll()事件。

My animation changes the width of the divs .我的 animation 改变了divs的宽度。 The problem is when I reach the end of the page, strange things are happening: The scroll() event is triggered by itself in an endless loop, scrolling the page a little bit upwards each time.问题是当我到达页面末尾时，发生了奇怪的事情： scroll()事件在无限循环中由自身触发，每次向上滚动页面。 How to fix it?如何解决？

<html>
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>

<div class='fadein' data-fadewidth='1em' id='1'>
Div 1
Long text so that the animation can be seen
</div>

<div class='fadein' data-fadewidth='2em' id='2'>
Div 2
Long text so that the animation can be seen
</div>

<div class='fadein' data-fadewidth='3em' id='3'>
Div 3
Long text so that the animation can be seen
</div>

<div class='fadein' data-fadewidth='4em' id='4'>
Div 4
Long text so that the animation can be seen
</div>

<div class='fadein' data-fadewidth='5em' id='5'>
Div 5
Long text so that the animation can be seen
</div>

<br/>

<style>
div {
    margin-bottom: 30%;
}
</style>

<script>

$(document).ready(function() {

    var refresh = function(cls) {

        $(cls).each( function(el) {
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            var delay = 0;
            var time = 2000;

            var animation = {};

            if ($(this).data('fadewidth') != undefined) {
                animation.width = $(this).data('fadewidth');
            }

            if( bottom_of_window > bottom_of_object - ($(window).height()*0.25) ) {

                setTimeout(function () {
                    $(this).animate(animation, time);
                }.bind(this), delay);

            }
        });
    };

    $(window).scroll(function() {
        console.log(Date(), ' page scrolled ');
        refresh('.fadein')});

    refresh('.fadein');

});

</script>

</body>
</html>

Described behavior was tested in: Firefox 69.0.3 and Chromium 77.0.3865.120 on GNU/Linux 4.19.69-1-MANJARO描述的行为在 GNU/Linux 4.19.69-1-MANJARO 上的 Firefox 69.0.3 和 Chromium 77.0.3865.120 中进行了测试

Answer 1

I changed your code a little bit.我稍微改变了你的代码。 this is the content of your script tag:这是您的script标签的内容：

<script>

$(document).ready(function() {

    var scrollHandler = function () {
        console.log(Date(), ' page scrolled ');
        refresh('.fadein');
    };

    function refresh(cls) {

        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
            // you're at the bottom of the page, so remove the event handler.
            $(window).off("scroll", scrollHandler);
        }
        $(cls).each( function(el) {
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            var delay = 0;
            var time = 2000;

            var animation = {};

            if ($(this).data('fadewidth') != undefined) {
                animation.width = $(this).data('fadewidth');
            }

            if( bottom_of_window > bottom_of_object - ($(window).height()*0.25) ) {

                setTimeout(function () {
                    $(this).animate(animation, time);
                }.bind(this), delay);

            }
        });
    };



    $(window).scroll(scrollHandler);


    refresh('.fadein');

});

</script>

I remove the event handler when the user scroll hits the bottom of the page.当用户滚动到页面底部时，我删除了事件处理程序。

But your code still have some problems:但是您的代码仍然存在一些问题：

if( bottom_of_window > bottom_of_object - ($(window).height()*0.25) ) {

    setTimeout(function () {
        $(this).animate(animation, time);
    }.bind(this), delay);

}

Here you set this animation too many times that even when user hits the bottom and remove the event handler, still remains animations to be executed.在这里，您将这个 animation 设置了太多次，即使用户点击底部并删除事件处理程序，仍然有动画要执行。

It happens because you already set them before.发生这种情况是因为您之前已经设置了它们。 So, if you wait some time, when all was executed, the page will stop scrolling up.因此，如果您等待一段时间，当所有内容都执行完毕后，页面将停止向上滚动。

Pay attention on that and change how to set the animation in a way that it execute only for one div at the time.请注意这一点并更改如何设置 animation，使其一次仅对一个 div 执行。

当页面滚动到底部时，JavaScript scroll() 事件无限循环

问题描述

1 个解决方案

解决方案1
0 2019-10-23 19:45:48

当页面滚动到底部时，JavaScript scroll() 事件无限循环

问题描述

1 个解决方案

解决方案1 0 2019-10-23 19:45:48

解决方案1
0 2019-10-23 19:45:48