Question

我尝试将网页设为幻灯片，每个部分都显示为幻灯片。 HTML是4个部分元素，每个元素都被标识为about，about2等。我使用jQuery使它们在加载时占据窗口高度。在向下滚动时，我激活了该功能，从一张幻灯片到另一张幻灯片。

它在第一张幻灯片上运行良好，但随后卡在它上面。如果我重新加载页面并在该位置重新加载，它将一直有效，直到下一张幻灯片再次卡住。

查看该值，我可以看到激活下一个动画的条件（例如，动画为＃about3），但它拒绝移动（滚动时始终动画为＃about2）。

我在这里做错了吗？

function scrollDown(){
    $height = window.innerHeight;
    $scroll = $(window).scrollTop();
    console.log($scroll+' and '+$height);
    if ( $scroll > 0 && $scroll < $height) {
        $('html, body').animate({scrollTop: $("#about2").offset().top}, 1000);    
    } else if ($scroll > $height && $scroll < 2*$height) {
        $('html, body').animate({scrollTop: $("#about3").offset().top}, 1000);    
    } else if ($scroll > 2*$height && $scroll < 3*$height) {
        $('html, body').animate({scrollTop: $("#about4").offset().top}, 1000);    
    }
}

这是一个带有我的代码的JSfiddle：https://jsfiddle.net/9b8s6pna/

Answer 1

你很亲密但只缺少一件事。由于调用scrollDown函数的次数，它似乎没有进入下一节。您创建了一个事件，每次滚动发生时触发，然后告诉窗口进行更多滚动，这将触发更多滚动事件创建一个长链。从本质上讲，一大堆动画请求正在排队。最后，如果你让页面足够长，它会向下滚动到about3部分。

我添加了一个布尔值来跟踪窗口滚动的时间并将其添加到逻辑检查中。这应该有助于防止过多的动画调用：]当满足窗口滚动到特定部分的条件时，布尔值'isScrolling'设置为true。动画完成后，该布尔值将重置为false，并且可以进行另一个滚动动画。

var isScrolling = false;

function scrollDown(){
    $height = window.innerHeight;
    $scroll = $(window).scrollTop();
    console.log($scroll+' and '+$height);
    if ( $scroll > 0 && $scroll < $height && isScrolling === false) {
            console.log('about1');
            isScrolling = true;
            $('html, body').animate({
                scrollTop: $("#about2").offset().top
            }, 1000, function(){ isScrolling = false; }
        );    
    } else if ($scroll > $height && $scroll < $height * 2 && isScrolling === false) {
            console.log('about2');
            isScrolling = true;
            $('html, body').animate({
                            scrollTop: $("#about3").offset().top
                            }, 1000, 
            function(){ isScrolling = false; }
         );    
    } else if ($scroll > 2*$height && $scroll < $height * 3 && isScrolling === false) {
            console.log('about3');
            isScrolling = true;
            $('html, body').animate({
                scrollTop: $("#about4").offset().top
                }, 1000,
                function(){ isScrolling = false; }
        );    
    }
}

另外，请注意，我必须在CSS中添加一个小调整以将正文上的边距设置为0.这会导致比较中出现问题，并且会使页面认为它向下滚动比实际上更低从而在整个页面中启动向下滚动到下一部分。通过滚动一次，它会产生连锁反应，一次性滚动整个网站。要查看此操作，只需删除边距：0;在jsfiddle上的正文标记上。

scrollTop（）和类似幻灯片的动画

1 个答案: