时间戳

首页 > 解决方案 > 让我的点击滚动功能无限循环的最简单方法？（滚动顶部/动画）

javascript - 让我的点击滚动功能无限循环的最简单方法？（滚动顶部/动画）

问题描述

与我之前的问题相比，这有点像一个类似的问题，但我完成了几个步骤。

我们有一个包含 6 个“场景”的页面。他们都有课.scene。

当我按下 时nextButton，我会根据我在页面上的位置转到下一个可见场景。因此，如果我滚动到场景 2，然后按下按钮，我需要转到场景 3。等等...

我设法弄清楚我在分配.animate()和财产方面出了什么问题，并scrollTop设法让工作没有问题。此时我可以根据需要转到下一个或上一个 div。previousButtonnextButton

它必须像这样动态地工作，因为如果或多或少divs会被添加。

现在我需要确保它“无休止地”滚动。如果我在最后一个场景，然后按nextButton，我将滚动回顶部，并继续它的常规功能。如果我在第一个场景并按下previousButton，我会向下滚动到最后一个场景/div。所以无论我点击多少，它都会持续循环

完成这项工作的最简单方法是什么？到目前为止，如果我到达任何一端，我都会收到一条错误消息，指出它“ cannot read property 'TOP' of undefined”

查询

var brightness = 90 ;
var $totalScenes = $('.scenes').length;

 // is in viewport function
    $.fn.isInViewport = function () {
        var elementTop = $(this).offset().top;
        var elementBottom = elementTop + $(this).outerHeight();
        var viewportTop = $(window).scrollTop();
        var viewportBottom = viewportTop + $(window).height();

        return elementBottom > viewportTop && elementTop < viewportBottom;
    };



$('.scenes').each(function() {
    $(this).css({"background-color" : "hsl(99, 100%, "+  brightness + "%"   + ")" });

    //je hebt 6 scenes en je wilt weten hoe groot de stappen zijn. vanaf de min bereken je hoe groot de stap is. dit doe je 1x (100/totalScenes - 1), dus van 100 naar nul in 5 stappen is 20. Dit herhaalt zich telkens.
    brightness = brightness - 100/($totalScenes - 1);

    console.log(brightness);

});


$(window).on('resize scroll', function() {

    $('.scenes').each(function(index) {
        if ($(this).isInViewport()) {

            console.log("dit is " + this.id);

            if(index >= $totalScenes / 2) {
                $('li').css({"color": "#fff"});
            }
                else {
                     $('li').css({"color": "#000"});
                }
            }
    });

});


$("#nextButton").on('click', function() {

     $('.scenes').each(function() {
        if ($(this).isInViewport()) {
            nextSlide = $(this).next();
        }
    });

     $("html, body").animate ({scrollTop: $(nextSlide).offset().top});
});



$("#previousButton").on('click', function(index) {

     $('.scenes').each(function() {
        if ($(this).isInViewport()) {
            prevSlide = $(this).prev();
        }
    });

        $("html, body").animate ({scrollTop: $(prevSlide).offset().top});
});

HTML

<!DOCTYPE html>
<html>

<head>
   <?php include 'template-parts/head.php'; ?>
</head>

<body>

<header>

    <ul>
        <li id="previous"><a id="previousButton" href="#">prev &#8593;</a></li>
        <li id="next"><a id="nextButton" href="#">next &#8595;</a></li>
    </ul>

</header>  

<main>

    <div id="wrapper">    
        <div id="scene1" class="scenes">
            <h2><span class="circle">1</span></h2>
        </div>
        <div id="scene2" class="scenes">
            <h2><span class="circle">2</span></h2>
        </div>
        <div id="scene3" class="scenes">
            <h2><span class="circle">3</span></h2>
        </div>
        <div id="scene4" class="scenes">
            <h2><span class="circle">4</span></h2>
        </div>
        <div id="scene5" class="scenes">
            <h2><span class="circle">5</span></h2>
        </div>
        <div id="scene6" class="scenes">
            <h2><span class="circle">6</span></h2>
        </div>    

    </div>

</main>

CSS 

html {
    scroll-behavior: smooth;
    font-family: 'Roboto', sans-serif;
}

.scenes {
    height: 100vh;
    max-width: 100vw; 
}

h2 {
    text-align: center;
    font-size: 10vh;
    line-height: 100vh;
}

.circle{     
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    font-weight: bold;
    line-height: 150px;
    width: 150px;
    display: inline-block;
}

header {
    position: fixed;
    width: 100vw;
    height: 100vh;
}


li {
    font-weight: bold;
    font-size: 1.4em; 
    position: absolute;
}

li a{
    cursor: pointer;
    text-align: center;

}

#previous {
    top: 20px;
    left: 50vw;
    transform: translate(-50%, 0);
}

#next {
    bottom: 20px;
    left: 50vw;
    transform: translate(-50%, 0);
}

标签： javascriptjqueryhtml

解决方案

我怀疑问题与此有关（以及之前的相关部分）：

nextSlide = $(this).next();

在这种情况下，如果是其兄弟姐妹中的最后一个，.next()将返回一个空集合。this稍后，在提供此空组时.offset()返回。undefined尝试访问.top该结果时会生成错误undefined。

要解决此问题，您需要确保处理nextSlide可能为空的可能性。有几种方法可以做到这一点。一种这样的解决方案可能是：

// your existing code
$('.scenes').each(function() {
  if ($(this).isInViewport()) {
    nextSlide = $(this).next();
  }
});

// additional code to fix the issue
if(nextSlide.length == 0) {
  nextSlide = $('.scenes').first();
}

// back to your existing code
$("html, body").animate ({scrollTop: $(nextSlide).offset().top});

推荐阅读