滚动到扩展 div 的底部
Posted
技术标签:
【中文标题】滚动到扩展 div 的底部【英文标题】：scroll to the bottom of an extended div 【发布时间】：2021-02-27 17:32:49 【问题描述】：我正在做一个小测试，显示脚步声并随着脚步声的增加而扩展 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】：你需要窗口滚动顶部$('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(`$nbFoot00`);
$(window).scrollTop($(".two")[0].scrollHeight);
, 200 * i)
);
【讨论】：
我的错...非常感谢，这些 scrollTop 事情对我来说很难... @pual 是的，有时它可能会令人困惑.. 祝你代码的其余部分好运:) 可能会不时出现在网站上！哈哈以上是关于滚动到扩展 div 的底部的主要内容，如果未能解决你的问题，请参考以下文章
如何扩展 iFrame/将内容从 iFrame 移动到 div？ [复制]