个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 22:17:15 25 4
gpt4 key购买 nike

与 to a question I had before 相比，这在某种程度上是一个类似的问题但我完成了一些步骤。

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

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

我设法找出分配 .animate() 和 scrollTop 属性时出错的地方，并设法获取 previousButton > 和 nextButton 工作没有问题。此时，我可以根据我需要的要求转到下一个或上一个 div。

它必须像这样动态工作，以便添加更多或更少的 div。

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

完成此任务最简单的方法是什么？到目前为止，如果我到达任一端，我都会收到一条错误，指出“无法读取未定义的属性'TOP'”

JQUERY

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);
}

最佳答案

我怀疑问题与此有关(以及之前的相关部分):

nextSlide = $(this).next();

在这种情况下，如果 this 是其同级集合中的最后一个，则 .next() 将返回一个空集合。稍后，当提供此空组时，.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});

关于javascript - 让我的点击滚动功能无限循环的最简单方法？ (滚动顶部/动画)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59347527/

25 4 0
文章推荐： javascript - 如何修复错误无法读取未定义的属性 'trim`
文章推荐： Elasticsearch 集群在添加节点后不重新平衡
文章推荐： elasticsearch - 文本搜索微服务架构
文章推荐： javascript - 如何创建动态变量并通过 useState() 使用它们
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com