Javascript scroll to bottom doesn't always scroll to bottom - javascript

I am using an Iframe which reloads itself every 5 seconds. It makes use of javascript to automaticly scroll to the bottom because it has too much content to display in one go, but sometimes after a refresh the scroll bar doesn't go down all the way. Leaving me scrolling it down myself.
I really don't know what it is. Maybe one of you has a better peice of Javascript suited for this.
Javascript:
<script>
var objDiv = document.getElementById("chat");
objDiv.scrollTop = objDiv.scrollHeight;
</script>
The HTML div:
<div id="chat" class="scroll">
*Content going on for 150 lines...*
</div>
Thanks in advance.

You could conceivably create a placeholder div at the bottom of your page, and use this answer to scroll to the bottom of it. This would ensure that you always scroll to that div, rather than what the query perceives as the bottom of the page.

Related

Prevent full page scrolling up on load()

I am using .load() to refresh the contents of a div every 5 seconds.
When the div updates, the whole page will scroll back up to the top. Is there any way to prevent this from happening?
<body>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<div main-title>Title</div>
<paper-button class="custom white" raised>Log Out</paper-button>
</app-toolbar>
</app-header>
<div id="loadcards"></div>
</body>
$("#loadcards").load("getGraph.php");
$(document).ready(function(){
setInterval(function(){
$("#loadcards").load("getGraph.php");
},5000);
});
Your page scrolls back to the top when you reload because your browser very briefly does not have any content for your div. This causes the content of your page to become too small to require a scrollbar, but when the content is reapplied it might grow large enough to require a scrollbar yet again.
Option 1
You could set the Y offset to the top of your page everytime before the reload is called, then scroll back to that offset whenever the page finishes reloading (or at least as far down as possible if the page is smaller than before).
You can obtain the current offset from the top of the window with the following code:
var offsetY = $(window).scrollTop();
If you want to scroll back to where you were before, you can do so by calling the following:
$('html, body').animate({
scrollTop: $(this).offset().top
}, 300);
This will gradually scroll, but you can set 300 to 0 if you want it to scroll instantly.
Depending on the efficiency with which your page loads, you'll probably still see a jump in the page contents.
Option 2
You can alternatively put your entire DIV inside a container with a fixed height, and reload the contents inside. You should set at least a min-height on the container div.
<div style="min-height: SOME_VALUE">
<div id="loadcards"></div>
</div>
Set SOME_VALUE to whatever comes closest to your actual page size. This should prevent the page jump as well, but will cause your page to have a minimal height even when the actual contents are smaller.
Option 3
The most advanced solution would be to use a container DIV and set the height to whatever the LoadPage height is just before you reload. This way it will only reset AFTER you reload your page.
<div id="cardscontainer" style="min-height: SOME_VALUE">
<div id="loadcards"></div>
</div>
With the following changes to your JS:
setInterval(function(){
$("#loadcards").load("getGraph.php");
$('#cardscontainer').height($('#loadcards').height());
},5000);
EDIT: I swapped the 2 functions inside the SetInterval callback function because it would result in weird behaviour if the LoadCards DIV would be smaller than before.

How to make fixed div (sticky sidebar) scroll up when it reaches footer

Please help JS experts! I have spent all day trying all the various solutions to similar problems here on StackOverflow - none of them do exactly what I want.
I have a dynamic height sidebar that becomes fixed when the user scrolls down to the bottom of the sidebar (the page content is often longer than the sidebar). This is so that the bottom half of the sidebar stays visible when the user keeps reading the content.
The problem is now the sidebar runs into the footer at the bottom of the page. Since the sidebar is longer than the view port, it cannot simply become position:relative again. It needs to scroll up with the footer (which has a dynamic height as well, to add to the complication).
I made an image (that it won't let me post here because I'll be damned if I know how to increase my reputation.) http://imgur.com/Wzb0LRu
What I'd like to happen is find a syntactically correct way of saying:
When scrollTop >= Height of Footer + 20px margin {
add CSS "bottom: <Height of Footer + 20px margin>" to SIDEBAR };
Thanks in advance for all who try to help!
There are two basic ways to do this:
Right way: fix the HTML so that the scroll bar's parent is contained in something that spans from the bottom of the header to the top of the footer. This way everything just works out.
Code:
<div id="header">
</div>
<div id="main">
<!-- possibly overflown stuff, maybe your fake scrollbar if you have one -->
</div>
<div id="footer">
</div>
If you can make this work, this will be the best way by far.
Less-Right Way: I think this only possible with variable size scrollbar made of a div or similar. Use something like:
Code:
element-that-scrolls.addEventListener("scroll",function(e){
// this condition may need some fiddling -- feel free to edit
if (element-that-scrolls.scrollTop > scrollable-height + pixel-height-of-footer - height-of-scrollbar - required-margin-btw-footer-and-scrollbar){
/* adjust height of scrollbar until previous condition is == */
}
},false);
Unfortunately I am on my phone and can't test these, but as I commented, feel free to edit.
Fun fact I just learned: the "code:" is necessary due to a markdown bug. See more.

Auto Scroll Down with Javascript

I would like you to help me make a Javascript code with autoscroll down in one particular div in one page, and while it scrolls down i want to make one procedure.
Im new in javascript but i know these things to help you out
<div class="uiScrollableAreaWrap scrollable" data-reactid=".c6.0">
This is the div of the box that is scrollable.
Could you give me an example of how can i make a javascript code
to take this class and scroll down until the end of the Wrap??
Update one.
http://screencast.com/t/8WNIFZB8rYG
Check out this photo to see all the divs of the box that i want to scroll down.
Relevant SO Link
Just for your case:
This will scroll down to bottom of the div
var objDiv = document.querySelector("._5tee .uiScrollableAreaWrap");
objDiv.scrollTop = objDiv.scrollHeight;
DEMO
Update:
based on your screenshot, Assuming that you want to scroll the ul list to the bottom.
var ulList= document.querySelector("._5tee .uiScrollableAreaWrap");
ulList.scrollTop = ulList.scrollHeight;
In case you want it for other div, use this pattern
.uiScrollableAreaWrap.scrollable yourdivselector

How can I auto-scroll as content is added to a div?

I have a div of fixed dimensions into which some JavaScript functions will be placing text over time. When the amount of text exceeds the height of the box, a scrollbar appears thanks to overflow:scroll.
The new problem is that the view into the div stays at the same place as more content appears. What I mean to say is that it stays scrolled wherever it is as more content appears beneath, hidden unless you manually scroll down. I want to make it automatically scroll to the bottom as new content appears so that the user naturally sees what appeared most recently instead of what's oldest.
Ideas?
You can use scrollTop method after each text addition:
$("div").scrollTop($("div").children().height());
Use inner block to get the true height.
DEMO: http://jsfiddle.net/eyY5k/1/
I found this approach to work for my needs:
var realHeight = $("#history")[0].scrollHeight;
$("#history").scrollTop(realHeight);
Do note this uses jquery.

How to limit page scroll to the div with the least amount of content?

i wish to limit the page of the scroll of my page to the end of content on the right div. The left div has a larger content but i want the page scroll to stop at the right div's and the left div to continue scroll within its area. I have the following script but it doesnt really seem to work:
<script>
window.onload=function(){
var i=10000000;
var buff='';
while(--i){
buff+='<br />';
}
document.body.innerHTML=buff;
}
</script>
an idea of what the problem is..
Can't you do it with CSS and position:fixed ? (I could provide you more code if you'd gave us some)

Categories