猿问

滚动到扩展 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>


精慕HU
浏览 87回答 1
1回答

www说

你需要窗口滚动顶部$('window').scrollTop($(".two")[0].scrollHeight);它肯定会起作用。$( document ).ready(function() {&nbsp; var nbFoot = 0 ;&nbsp; for (var i = 0; i < 500; i++) {&nbsp;&nbsp; &nbsp; setTimeout(function () {&nbsp; &nbsp; &nbsp; nbFoot++;&nbsp; &nbsp; &nbsp; var footSteps = $("<div />", {"class": "footSteps"})&nbsp; &nbsp; &nbsp; .css({})&nbsp; &nbsp; &nbsp; .append($("<p>" + nbFoot + " pas </p>"))&nbsp; &nbsp; &nbsp; .appendTo(".one")&nbsp; &nbsp; &nbsp; $(".footSteps").prev().remove();&nbsp; &nbsp; &nbsp; $(".two").height(`${nbFoot}00`);&nbsp; &nbsp; &nbsp;$(window).scrollTop($(".two")[0].scrollHeight);&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }, 200 * i)&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; });
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答