1

I have a message box at a fixed height which displays multiple messages. How can I use css to ensure the scroll bar is always at the bottom, i.e displaying the last entry?

Currently, as more .message-box enter the .chat-box-main, everything inside stays static. The only way to see the last entry is to manually scroll up. How can this be automated to scroll up? 

<div class="chat-box-main">

  {{#each messages}}
    <div class="message-box">{{text}}</div>
  {{/each}}

</div>

css:

.chat-box-main {
height:250px;
overflow:auto;
}

I am using meteor and have this function run when the template is created. I will update my question. Since all the divs are inserted 'reactively' within my helper function, I am trying to figure out how to make this computation run everytime a new div is inserted within the scrolling div

meteorBuzz
  • 3,110
  • 5
  • 33
  • 60
  • probably only doable with javascript, not pure css – zgood May 21 '15 at 17:11
  • possible duplicate of [How keep scroll bar in bottom in div?](http://stackoverflow.com/questions/14894878/how-keep-scroll-bar-in-bottom-in-div) – Vucko May 21 '15 at 17:12
  • I agree, I can't come up with a way to do that. There definitely should be, the world needs this – Ben Philipp May 21 '15 at 17:12

1 Answers1

0

I created the following snippet that will work for your case. Pure CSS is not possible so this utilizes JavaScript/jQuery.

$(document).ready(function(){
  var $elem = $('.container');
  var height = $elem[0].scrollHeight;

  $elem.scrollTop(height);
});
.container{
  height: 50px;
  background:red;
  overflow:scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  foo<br >
  foo<br >
  foo<br >
  foo<br >
  foo<br >
  foo<br >
  foo<br >
  foo<br >
  foo<br >
  bar
</div>
xengravity
  • 3,501
  • 18
  • 27
  • xengravity, I see this is works on page load. I am using meteor and have this function run when the template is created. I will update my question. Since all the divs are inserted 'reactively' within my helper function, I am trying to figure out how to make this computation run everytime a new div is inserted within the scrolling div – meteorBuzz May 21 '15 at 19:05
  • I don't know meteor but can't you simply call the function after a new div is inserted? – xengravity May 21 '15 at 19:26
  • There is a simple way but in my case, I have done a 'reactive-join' so am trying to figure out how to apply this function to the helper function which creates all these divs – meteorBuzz May 21 '15 at 19:32