CODEWITHSUNDEEP
javascripthtmljquerycssscroll
Aurore
Aurore

Reputation: 746

scroll to the bottom as an element is created

I'm making this page where your mouse actions are tracked and shown on screen in a column. I would like to autoscroll as soon as the div is scrollable.

I've tried

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

But it seems I don't really understand how to use it... Maybe it's not placed where it should be.

I've also tried adding :last in case I was supposed to specify to which div it's supposed to scroll. 

$(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>

Upvotes: 3

Views: 145

Answers (1)

Popnoodles
Popnoodles

Reputation: 28409

Using :last was a good call, but with $(window).scrollTop you're trying to scroll within the window, and it has nowhere to scroll. Tell the container to scroll instead.

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

If you start populating the others, you're going to need to specify which .document:last in which container to find

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

Alternatively, you could just scroll to the bottom of the div

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

Upvotes: 1

Related Questions