Keep Overflow Div Scrolled to Bottom Unless User Scrolls Up

Keep overflow div scrolled to bottom unless user scrolls up

This might help you:

var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;

[EDIT], to match the comment...

function updateScroll(){
var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;

whenever content is added, call the function updateScroll(), or set a timer:

//once a second

if you want to update ONLY if the user didn't move:

var scrolled = false;
function updateScroll(){
var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;

$("#yourDivID").on('scroll', function(){

Typed.js - Keep div scrolled to bottom as div increases in size unless user interacts with scrollbar?

Easy. Something like this:

    var youInterval; 

function startInterval(){

youInterval = setInterval(function() {
var elem = document.getElementById('scrollBottom');
elem.scrollTop = elem.scrollHeight;
}, 500);


//If user scrolls, stop interval
document.addEventListener('scroll', function (event) {
if ( === 'scrollBottom') { // or any other filtering condition

}, true /*Capture event*/);

//And start it whenever you need

How to keep a div scrolled to the bottom as HTML content is appended to it via jquery, but hide the scroll bar?

All you need is to add overflow: hidden to your container and scroll it once content is loaded:

div.scrollTop = div.scrollHeight;


How to keep a scrollbar always bottom?

var messageBody = document.querySelector('#messageBody');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;

Scroll to bottom of div?

Here's what I use on my site:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

JQuery - Scroll and anchor to bottom of ajax-driven div unless user scrolls up

On question you linked to, there is a better implementation

I've reworked that author's code below:

$(document).ready(function() {
var out = document.getElementById("chat-feed"); // outer container of messages var c = 0; // used only to make the fake messages different
// generate some chatter every second setInterval(function() {
//check current scroll position BEFORE message is appended to the container var isScrolledToBottom = checkIfScrolledBottom();
// append new mesage here $('#chat-feed').append("<div>Some new chat..." + c++ + "</div>").fadeIn("slow");
// scroll to bottom if scroll position had been at bottom prior scrollToBottom(isScrolledToBottom);
}, 1000);
function checkIfScrolledBottom() { // allow for 1px inaccuracy by adding 1 return out.scrollHeight - out.clientHeight <= out.scrollTop + 1; }
function scrollToBottom(scrollDown) { if (scrollDown) out.scrollTop = out.scrollHeight - out.clientHeight; }});
<script src=""></script>
<div id="chat-feed" style="height: 150px; width: 300px; overflow: auto;"></div>

Related Topics

Leave a reply