滚动到扩展 div 的底部答案

【问题标题】：scroll to the bottom of an extended div滚动到扩展 div 的底部
【发布时间】：2023-04-04 13:44:01
【问题描述】：

我正在做一个小测试，显示脚步声并随着脚步声的增加而扩展 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>

【问题讨论】：

标签： javascript html jquery dom

【解决方案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(`${nbFoot}00`);
     $(window).scrollTop($(".two")[0].scrollHeight);
      
    }, 200 * i)


      }
      
    });

【讨论】：

我的错...非常感谢，这些 scrollTop 事情对我来说很难...
@pual 是的，有时它可能会令人困惑.. 祝你代码的其余部分好运:)
可能会不时出现在网站上！哈哈