CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3475724
user3475724

Reputation:

Changing default div scroll-x behaviour

There is a div

    .dialog_container{

    width: 100%;
    height: 500px;

}

New div messages are appended to container:

$('.dialog_container').append('<div class="message_container"></div>')

The natural behaviour of container in case of overflow-x:scroll is clear. But I want the opposite, so that it would scroll and extend at the top when there are more elements than default container can contain, not at the bottom as usual. It's mainstream design in messengers and etc.

How could I implement that ? Google only helped with some plugins creating custom scroll tabs and stuff.

Upvotes: 1

Views: 40

Answers (1)

Rick Calder
Rick Calder

Reputation: 18705

You want to grab the height of the div, then use animate scrollTop to animate the entire height.

jQuery

$(".append").on("click", function(e) {
    e.preventDefault();
  $(".messages-container").append("<p>I'm a new message</p>");

  //Relevant jQuery start
  var height = $(".messages-container")[0].scrollHeight;
  $(".messages-container").animate({
    scrollTop: height
  });
  //Relevant jQuery end
});

HTML

<div class="messages-container">

</div>
<button class="append">
Append Message
</button>

Fiddle: https://jsfiddle.net/calder12/nasrk4fk/

Upvotes: 1

Related Questions