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
How to Make a Bot React to Its Own Message
Horizontal Scrollbar on Top and Bottom of Table
Disable Chrome Strict Mime Type Checking
How to Check If Input Field Is in Focus or Not
How to Display an Iframe on Button Click
Stylesheet Not Loading Because Mime Type Is Text/Html
Changing the Browser Zoom Level
How Add a New Key/Value Pair to a Json Object
Browserify :- Uncaught Typeerror: Fs.Readfilesync Is Not a Function
How to Update a Variable After Button Click
How to Change Color of Button on Press in React Native
Opening Pdf String in New Window With JavaScript
How to Clear Input After Onclick With Reactjs
Dynamically Increase and Decrease an Input Text Box Size Depending on Another Selector Width
How to Play Audio File into Channel
Uncaught Typeerror: Cannot Read Property 'Click' of Null Chrome Extension