滚动到扩展 div 的底部
[英]scroll to the bottom of an extended 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>
1 个解决方案
解决方案1
1 已采纳 2020-11-16 14:53:57
你需要窗口滚动顶部$('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)
}
});
滚动到动态Div的底部
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.