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
setInterval(updateScroll,1000);

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

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

$("#yourDivID").on('scroll', function(){
scrolled=true;
});

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 (event.target.id === 'scrollBottom') { // or any other filtering condition

clearInterval(youInterval);
}
}, true /*Capture event*/);

//And start it whenever you need
startInterval();

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;

Demo http://jsfiddle.net/nT75k/2/

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 https://stackoverflow.com/a/21067431/1544886.

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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chat-feed" style="height: 150px; width: 300px; overflow: auto;"></div>


Related Topics



Leave a reply



Submit