Блог

Главная - Вопросы по программированию - прокрутка вниз при создании элемента

прокрутка вниз при создании элемента

#javascript #html #jquery #css #scroll

#javascript #HTML #jquery #css #прокрутка

Вопрос:

Я создаю эту страницу, на которой ваши действия мыши отслеживаются и отображаются на экране в виде столбца. Я хотел бы выполнить автоматическую прокрутку, как только div можно прокрутить.

Я пробовал

 $(window).scrollTop($('.document').offset().top);

Но, похоже, я не совсем понимаю, как его использовать…
Возможно, он размещен не там, где должен быть.

Я также попытался добавить :last в случае, если я должен был указать, к какому div он должен прокручиваться. 

 $(document.body).click(function (b) {

        var verbes = [
        "appuie",
        "bouscule",
        "pousse"
        ];

        var adverbes = [
        "puis",
        "ensuite",
        "pour finir",
        "alors"
        ];

        var verbe = verbes[Math.floor(Math.random()*verbes.length)];
        var adverbe = adverbes[Math.floor(Math.random()*adverbes.length)];
        var verbadv = verbe   " "   adverbe;


        var actionPoetique = $("<div />", {
          "class": "document"
        })
        .css({
          "left": b.pageX   'px',
          "top": b.pageY   'px'
        })
        .append($("<p>"   verbadv   "</p>"))
        .appendTo(".one");
        $(window).scrollTop($('.document:last').offset().top);
        
      });  
 body {
  font-family: sans-serif;
  font-size: 1.3rem;
  margin: 0;
  background-color: DarkSlateGray;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0px;
  grid-auto-rows: minmax(100vh, auto);
  height: 100vh;
}

.one,
.two,
.three,
.four {
  position: relative;
  overflow: scroll;
  height: 100%;
  background-color: tan;
}

.one {
  grid-column: 1 / 2;
}

.two {
  grid-column: 2 / 3;
}

.three {
  grid-column: 3 / 4;
}

.four {
  grid-column: 4 / 4;
}

.one::-webkit-scrollbar, 
.two::-webkit-scrollbar, 
.three::-webkit-scrollbar, 
.four::-webkit-scrollbar { 

}

.note {
  text-align: center;
  width: 100px;
  height: 30px;
}

.note p{
  filter: drop-shadow(0 0 0.75rem black);
}

.document{

  text-align: center;
}
.document p{
    padding: 0;
   margin: 0;
}

.username{
  text-align: center;
    padding: 0;
   margin: 0;
}

.direction{
  position: fixed;
  bottom : 0;
  width: 25vw;
  text-align: center;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>en ligne</title>
    <meta charset="UTF-8">

    <script
    src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha256-4 XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="
    crossorigin="anonymous"></script>

    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="text.js"></script>
    <script src="color.js"></script>
    <script src="users.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 class="three" id="gauche2">    <div class="dir3"></div> </div>
        <div class="four" id="droite2">    <div class="dir4"></div> </div>
    </div>
    <div class ="texte"></div>
<div class="note" style="display: none;">*</div>  

</body>

    
</html>

Ответ №1:

Использование :last было хорошим вызовом, но $(window).scrollTop вы пытаетесь прокручивать внутри окна, и ему некуда прокручивать. Вместо этого укажите контейнеру прокрутку.

$('.one').scrollTop($('.document:last').offset().top);

Если вы начнете заполнять другие, вам нужно будет указать, .document:last в каком контейнере искать

$('.one').scrollTop($('.one .document:last').offset().top);

В качестве альтернативы, вы можете просто прокрутить до нижней части div

$('.one').scrollTop($('.one')[0].scrollHeight);

Комментарии:

1. Большое спасибо, по какой-то причине я не смог увидеть, что пытался прокрутить окно, ха-ха. Я пытаюсь анимировать его сейчас! Еще раз спасибо!