滚动到扩展 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>
精慕HU1回答
-
www说
你需要窗口滚动顶部$('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) } });
随时随地看视频慕课网APP
相关分类
JavaScript