Question

我的代码存在问题。窗口不会滚动到第三部分。代码从第二张幻灯片跳转到第四张幻灯片。在我的控制台日志中，数据正确600,1200,1800和2400。我尝试了不同的东西，但错误仍然存在。

<html>
<head>
<style>

body, html{margin:0;}
.slide{height: 600px;}
button{position:fixed; top:0; left:50%; margin-left:-32px;}

</style>
</head>
<body>

<div class="container">
  <div class="slide onscreen" style="background-color:#FFC000;"></div>
  <div class="slide" style="background-color:#FF4800;"></div>
  <div class="slide" style="background-color:#FFC480;"></div>
  <div class="slide" style="background-color:#AA4560;"></div>
  <div class="slide" style="background-color:#000000;"></div>
</div>
<button onclick="next()">volgende</button>


<script>
var section = document.getElementsByClassName("onscreen");

function next() {
  if (section[0].nextElementSibling) {
    section[0].nextElementSibling.className = "slide onscreen";
    section[0].className = "slide";
    var newTop = section[0].offsetTop;
    window.scrollBy(0, newTop);
    console.log(newTop);

  }
}
</script>

</body>
</html>

Answer 1

这些幻灯片都是兄弟姐妹。因此，每张幻灯片上的offsetTop将逐渐增大。滑动1,600px，滑动2,1200px，依此类推。 window.scrollBy滚动到窗口当前位置+给定的数量。因此，如果您在window.scrollY = 0，并且传递600，那么您将在window.scrollY = 600.当您在下一轮传递1200时，您将在window.scrollY = 1800 ！所以现在好像你已经跳过了幻灯片3，因为你滚动了2倍的幻灯片高度。

可能的答案，如果你不想要解决剩下的问题：

如果您的幻灯片具有硬编码高度，您也可以尝试传递硬编码的scrollBy值。或者，如果您希望使代码更灵活，可以查询每个滑块的高度并改为传递该值。然后你可以在css-land中调整幻灯片的高度，而不会破坏你的js逻辑。

第三节不在屏幕上

1 个答案: