CSS smoothly scrolls upward within a set height restriction

Question

CSS smoothly scrolls upward within a set height restriction

Is there a way to use CSS to ensure that the scroll bar of a fixed-height message box is always at the bottom, displaying the latest entry?

Currently, as more messages populate the chat box main section, everything inside remains static. The only way to view the most recent message is to manually scroll up. How can this be automated to scroll up automatically?

<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 a function running when the template is created. Since all divs are inserted reactively within my helper function, I am trying to find a way to make this computation run every time a new div is added within the scrolling div.

css

Answer 1

Answer №1

Below is a snippet I put together specifically for your scenario. Unfortunately, achieving this solely with CSS is not possible, so JavaScript/jQuery is utilized.

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

Answer 2

Below is a snippet I put together specifically for your scenario. Unfortunately, achieving this solely with CSS is not possible, so JavaScript/jQuery is utilized.

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

CSS smoothly scrolls upward within a set height restriction

Answer №1

Similar questions

What is the method for increasing the left margin of the back button on the default header in React Native?

Using conditional CSS in React/Next.js

Having trouble with margins not working after adding the clear property in CSS?

Guide on accessing a local image while setting the background image using JavaScript

How to set the default theme color for the mat-sidenav background in Angular 6 and 7?

Explanation for aligning anchors within an HTML <div>

Tips for aligning a div (or any other content) in the center of a

When the content in the div exceeds its boundaries, it causes it to overlap with

Tips for dynamically changing the body class based on the page in a remix

CSS Class ID selection for selectpicker

IE rendering issue: jQuery image slideshow captions lack transparency

setting the child div's margin in relation to its parent div

Utilizing CSS/HTML to optimize code for mobile applications

Identify a CSS style or attribute that is being dynamically assigned using JavaScript

Tips for preventing overlap between two divs when utilizing position: absolute in CSS

How can I use XPATH to target a div after choosing a nested element?

sidebar that appears upon the initial page load

How can you implement CSS styling for Next.js HTML during server-side rendering?

Slideshow through each item using Typescript and Angular8

Proper techniques for enlarging a background image using CSS