与 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 ↑</a></li>
<li id="next"><a id="nextButton" href="#">next ↓</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/