當頁面滾動到底部時，JavaScript scroll() 事件無限循環

Question

我制作了一個頁面，當用戶滾動頁面時，一旦 window 到達它，每個div就會被動畫化。 我使用 jQuery 來處理scroll()事件。

我的 animation 改變了divs的寬度。 問題是當我到達頁面末尾時，發生了奇怪的事情： scroll()事件在無限循環中由自身觸發，每次向上滾動頁面。 如何解決？

<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>

描述的行為在 GNU/Linux 4.19.69-1-MANJARO 上的 Firefox 69.0.3 和 Chromium 77.0.3865.120 中進行了測試

Answer 1

我稍微改變了你的代碼。 這是您的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>

當用戶滾動到頁面底部時，我刪除了事件處理程序。

但是您的代碼仍然存在一些問題：

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

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

}

在這里，您將這個 animation 設置了太多次，即使用戶點擊底部並刪除事件處理程序，仍然有動畫要執行。

發生這種情況是因為您之前已經設置了它們。 因此，如果您等待一段時間，當所有內容都執行完畢后，頁面將停止向上滾動。

請注意這一點並更改如何設置 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