滚动到扩展div的底部



我正在做一个小测试,显示足迹并随着足迹数的增长扩展div。我试图通过使用jquery让用户位于粉红色div的底部,所以随着div的增长,他总是位于底部。我试过这类线路:

$(".two").scrollTop($(".two")[0].scrollHeight);

但似乎什么都不起作用。

我想请一个新的眼睛来告诉我我在那里做错了什么!非常感谢。

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

您需要窗口滚动顶部$('window').scrollTop($(".two")[0].scrollHeight);,它肯定会工作。

$( 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)

}

});

最新更新