JAVASCRIPT SCROLL DIV TO BOTTOM

    X

    Javascript Scroll Div to bottom


    0

    I wanted a div to scroll directly to bottom of the div on page load. Found the below properties useful for understanding how to scroll to bottom. You can Check how the scrollTop changes when you scroll the content @ Scroll Div Example.

    var h = element.clientHeight;
    This gives CSS height + CSS padding - height of horizontal scrollbar (if present) e.g. inner height of element in pixels, including padding but not horizontal scrollbar height, border, or margin.

    var h = element.offsetHeight;
    This gives CSS height + CSS padding + CSS border + height of horizontal scrollbar (if present) e.g. actual height of element in pixels.

    var h = element.scrollHeight;
    This gives CSS height + CSS padding + height of horizontal scrollbar (if present) e.g. height of an element's content in pixel including content not visible on the screen due to overflow.

    var h = element.scrollTop;
    This measures the distance of an element's top to its topmost visible content in pixel.
    If the element can't be scrolled (e.g. it has no overflow / non-scrollable), scrollTop is 0.
    If set to a value less than 0, scrollTop is 0.
    If set to a value greater than the maximum that the content can be scrolled, scrollTop is set to maximum.

    element.onScroll=do something
    This is an event which will trigger when you scroll the content of an element with scrollbar.

    Source :
    https://developer.mozilla.org/en/docs/Determining_the_dimensions_of_elements
    https://developer.mozilla.org/en-US/docs/Web/API/element.scrollHeight

    Unless you are over-complicating a simple thing, clientHeight, scrollHeight, scrollTop & onScroll should be more than enough to do required things like controlling the scroll bar, Scroll to load etc.
    Getting it all together then <script type="text/javascript">
    //Reduce writing document.getElementById again and again (popularized by jquery)
    function $(x){return document.getElementById(x);}

    //Scroll to div top directly
    function sc_top(){$("the_div1").scrollTop=0;}

    //Scroll to div bottom directly
    function sc_bottom(){$("the_div1").scrollTop=$("the_div1").scrollHeight;}

    //Measure and display the scroll bar position also checks if we have reached end of scroll
    //onscroll event binded to div element
    function scrolldiv(){
    $("scstat1").innerHTML=$("the_div1").scrollTop;
    $("scstat2").innerHTML=$("the_div2").scrollTop;
    if($("the_div1").scrollHeight-$("the_div1").scrollTop==$("the_div1").clientHeight){$("btm").innerHTML="<center class=\'alert\'>You reached bottom</center>";}
    else{$("btm").innerHTML="<br/>";}}
    </script>

    Check the demo @Scroll Div Example

    Required javascript for scrolling div to bottom directly

    would then be document.getElementById("id_of_div").scrollTop=document.getElementById("id_of_div").scrollHeight; Don't forget to change the "id_of_div" to the div element id of your page.
    Remember that the element needs to be defined prior checking the scroll height.
    The above code simply sets the elements scrollTop equal to the elements content height and hence gets the scrollbar directly to the bottom. Javascript Scroll Div to bottom

    Rishi Kashyap | 1 year ago| REPLY

    tags   javascript

    You may also Like :
    We are updating, some features may not work !
    Please leave a feedback if you face any problem.