scroll to the bottom of an extended div
Question
I'm making a little test that is displaying footsteps and extending the div as the footsteps count grows. I'm trying to get the user at the bottom of the pink div by using jquery, so he is always at the bottom as the div is growing. I tried these kind of lines :
$(".two").scrollTop($(".two")[0].scrollHeight);
But nothing seems to work.
I wanted to ask for a fresh eye that could tell me what I'm doing wrong there! Thanks a lot.
$( document ).ready(function() { var nbFoot = 0 ; for (var i = 0; i < 500; i++) { setTimeout(function () { nbFoot++; var footSteps = $("<div />", {"class": "footSteps"}) .css({}) .append($("<p>" + nbFoot + " pas </p>")) .appendTo(".one") $(".footSteps").prev().remove(); $(".two").height( nbFoot +"00"); $(".two").scrollTop($(".two")[0].scrollHeight); }, 200 * i) } });
body { font-family: sans-serif; font-size: 1.3rem; margin: 0; background-color: #5a6c58; height: 100%; } .wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0px; grid-auto-rows: minmax(100vh, auto); height: 100vh; } .one { position: fixed; height: 800px; background-color: tan; } .two, .three, .four { position: relative; height: 100%; background-color: #ffdbf5; } .one { grid-column: 1 / 2; } .two { grid-column: 2 / 4; } .three { grid-column: 3 / 4; } .four { grid-column: 4 / 4; } .one::-webkit-scrollbar, .two::-webkit-scrollbar, .three::-webkit-scrollbar, .four::-webkit-scrollbar { }
<!DOCTYPE html> <html> <head> <title>en ligne</title> <meta charset="UTF-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <script src="script.js"></script> </head> <body> <div class="wrapper"> <div class="one" id="gauche"> <div class="dir1"></div> </div> <div class="two" id="droite"> <div class="dir2"></div> </div> </div> <div class ="texte"></div> <div class="note" style="display: none;">*</div> </body> </html>
1 answers
solution1
1 ACCPTED 2020-11-16 14:53:57
you need the window scroll top $('window').scrollTop($(".two")[0].scrollHeight); it will work for sure.
$( document ).ready(function() {
var nbFoot = 0 ;
for (var i = 0; i < 500; i++) {
setTimeout(function () {
nbFoot++;
var footSteps = $("<div />", {"class": "footSteps"})
.css({})
.append($("<p>" + nbFoot + " pas </p>"))
.appendTo(".one")
$(".footSteps").prev().remove();
$(".two").height(`${nbFoot}00`);
$(window).scrollTop($(".two")[0].scrollHeight);
}, 200 * i)
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.