第三节不在屏幕上

我对下面的代码有问题。该窗口不滚动到第三部分。代码从幻灯片2跳到幻灯片4。在我的控制台日志数据是正确的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>

来源

2016-10-03 Joppieb

这些幻灯片都是兄弟姐妹。所以在每张幻灯片上offsetTop将逐渐变大。幻灯片1,600像素，幻灯片2，1200像素等等。 window.scrollBy滚动到Windows当前位置+给定的数量。所以如果你在window.scrollY = 0，并且传递600，你将会在window.scrollY = 600.当你在下一轮传递1200时，你将会在window.scrollY = 1800！所以现在看起来好像你跳过幻灯片3，因为你滚动了幻灯片的两倍高度。

可能的答案，如果你不想搞清楚休息了挑战：

如果你有你的幻灯片硬编码的高度，你可以尝试通过硬编码scrollBy值也是如此。或者，如果您想让代码更加灵活一些，您可以查询每个滑块的高度并传递该值。然后你可以调整你的幻灯片在css-land的高度而不会破坏你的js逻辑。

来源

2016-10-03 21:49:57

好吧，我不知道他总结了价值。我改变了功能“window.scrollTo（）”现在它的工作:) – Joppieb

Joppieb没有总结价值。每张幻灯片放在窗口的下方，产生更大的offsetTop值。即使如此，window.scrollTo也是一个很好的解决方案=）。 –

第三节不在屏幕上

回答

相关问题