Fonction Dynamic ScrollTo nécessitant l'élément suivant

Question

Veuillez regarder mon exemple.

J'ai plusieurs lignes sur mon site Web et un bouton de défilement() qui est toujours au bas de l'écran. Selon l'endroit où l'usere se trouve sur mon site à un certain moment, je voudrais qu'il passe à la rangée suivante après avoir cliqué sur le bouton.

Je suis conscient de comment faire un utilisateur scrollto(), mais je n'ai aucune idée du type de sélecteur que je devrais utiliser.

function myFunction() { 
 
var winScroll = window.scrollTop; // current scroll of window 
 
// find closest div 
 
var rows = document.querySelectorAll('.row'); 
 
var closest = rows[0]; // first section 
 
var closest_idx = 0; 
 
var min = closest.offsetTop - winScroll; 
 
rows.forEach(function(row, index) { 
 
    var divTopSpace = row.offsetTop - winScroll; 
 
    if(divTopSpace < min && divTopSpace > 0) { 
 
     closest = row; 
 
     closest_idx = index; 
 
     min = divTopSpace; 
 
    } 
 
}); 
 
var next_idx = closest_idx + 1; 
 
if (next_idx == rows.length) { 
 
    next_idx = 0; 
 
} 
 
console.log(rows[next_idx]); 
 
}

.rowOne { 
 
    height: 100vh; 
 
    background-color: peachpuff; 
 
} 
 

 
.rowTwo { 
 
    height: 100vh; 
 
    background-color: firebrick; 
 
} 
 

 
.rowThree { 
 
    height: 100vh; 
 
    background-color: deepskyblue; 
 
} 
 

 
.btn { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 30px; 
 
}

<div class="main"> 
 
    <div class="row rowOne"> 
 
    <div class="a"> 
 
     <div class="b"> 
 
     Foo 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row rowTwo"> 
 
    <div class="a"> 
 
     <div class="b"> 
 
     Bar 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row rowThree"> 
 
    <div class="a"> 
 
     <div class="b"> 
 
     Foobar 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <button id="btn" class="btn" onclick="myFunction()">Button</button> 
 
</div>

Merci à l'avance.

Answer 1

Comme ils ont tous la même hauteur (100% de la hauteur de la fenêtre), la solution simple serait simplement de faire défiler cette quantité.

window.scrollBy(0, window.innerHeight); 

Sinon, vous devrez détecter quel élément est le « courant », puis l'obtenir est la prochaine étape frères et soeurs, puis faites défiler jusqu'à. Quelque chose comme ça (n'a pas testé, donc la syntaxe peut être désactivé, mais cela devrait vous donner une idée)

var winScroll = window.scrollTop; // current scroll of window 
// find closest div 
var rows = document.querySelectorAll('.row'); 
var closest = rows[0]; // first section 
var closest_idx = 0; 
var min = closest.offsetTop - winScroll; 
rows.forEach(function(row, index) { 
    var divTopSpace = row.offsetTop - winScroll; 
    if(divTopSpave < min && divTopSpave > 0) { 
     closest = row; 
     closest_idx = index; 
     min = divTopSpace; 
    } 
}); 
var next_idx = closest_idx + 1; 
if (next_idx == rows.length) { 
    next_idx = 0; 
} 
window.scrollTo(rows[next_idx].scrollTop);