第三節不在屏幕上

我對下面的代碼有問題。該窗口不滾動到第三部分。代碼從幻燈片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也是一個很好的解決方案=）。 –

第三節不在屏幕上

回答

相關問題