Dritter Abschnitt nicht auf dem Bildschirm

Ich habe ein Problem mit dem Code unten. Das Fenster scrollt nicht zum dritten Abschnitt. Der Code springt von Folie zwei auf Folie vier. In meinem Konsolenprotokoll sind die Daten korrekt 600, 1200, 1800 und 2400. Ich habe verschiedene Dinge ausprobiert, aber der Fehler ist immer noch da.Dritter Abschnitt nicht auf dem Bildschirm

<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>

Quelle

2016-10-03 Joppieb

Diese Folien sind alle Geschwister. Daher wird offsetTop auf jeder Folie inkrementell größer. Slide 1, 600px, Folie 2, 1200px und so weiter. window.scrollBy scrollt zu der aktuellen Position des Fensters + dem angegebenen Betrag. Wenn du also window.scrollY = 0 bist und 600 passierst, bist du bei window.scrollY = 600. Wenn du bei der nächsten Runde 1200 passierst, bist du bei window.scrollY = 1800! Jetzt scheint es so, als ob Sie die Folie 3 übersprungen haben, weil Sie 2x die Höhe einer Folie verschoben haben.

Mögliche Antwort, wenn Sie nicht vor der Herausforderung, wollen den Rest herauszufinden:

Wenn Sie eine hartkodierte Höhe für Ihre Folien haben, könnten Sie versuchen, eine hartkodierte vorbei scrollBy Wert auch. Oder wenn Sie Ihren Code etwas flexibler gestalten möchten, können Sie jeden Schieberegler nach seiner Höhe abfragen und stattdessen diesen Wert übergeben. Dann können Sie die Höhe Ihrer Folie in CSS-Land anpassen, ohne Ihre js-Logik zu brechen.

Quelle

2016-10-03 21:49:57

Ah ok, ich wusste nicht, dass er den Wert summiert. Ich änderte die Funktion zu "window.scrollTo()" jetzt funktioniert es :) – Joppieb

Joppieb summierte den Wert nicht. Jede Folie befand sich weiter unten im Fenster, was zu größeren offsetTop-Werten führte. Auch wenn window.scrollTo eine gute Lösung ist =). –

Dritter Abschnitt nicht auf dem Bildschirm

Antwort

Verwandte Themen