Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cross-Browser method for setting ScrollTop of an element?

For example I have I a div tag with the scroll bar on the right of the div tag.
I want to show the div with the last line, so I have this:

document.getElementById("divscroll").scrollTop = 250000;

I can make it scroll to the end in Firefox but never succcess with IE event with the bigger number!
Is there any simple Cross-borwser script (not JQuery or any big framework!)

like image 579
nvcnvn Avatar asked Jun 13 '11 16:06

nvcnvn


People also ask

How is scrollTop calculated?

scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically. An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content. When an element's content does not generate a vertical scrollbar, then its scrollTop value is 0 .

What is $( window scrollTop ()?

The scrollTop() method sets or returns the vertical scrollbar position for the selected elements. Tip: When the scrollbar is on the top, the position is 0. When used to return the position: This method returns the vertical position of the scrollbar for the FIRST matched element.

Why is scrollTop not working?

If your CSS html element has the following overflow markup, scrollTop will not function. To allow scrollTop to scroll, modify your markup remove overflow markup from the html element and append to a body element.


2 Answers

scrollTop works in all major browsers.

To scroll to the bottom of the element:

var div = document.getElementById('divscroll');
div.scrollTop = div.scrollHeight - div.clientHeight;

clientHeight also works across browsers, and scrollHeight mostly works.

like image 144
Matt Ball Avatar answered Sep 24 '22 18:09

Matt Ball


Make sure that overflow property is set:

<div id="divscroll" style="height: 100px; width: 100px; overflow: scroll;">
 //// something something 
</div>
like image 32
Scherbius.com Avatar answered Sep 24 '22 18:09

Scherbius.com