Question

I have a web application that performs certain task, and have created a tabbed box in the web app that will print any log information to the designated area.

As you can see from the code below I have three tabs, and when one is clicked I have javascript and jQuery display the div area associated with that tab. Under each div area there is a nested div that will be used for the log to print to.

All is working great other than the scroll bar not staying at the bottom.

I have tried:

HTML:

    <div id="main" class="main">
        <div id="tabbed-box"class="tabbed-box">
               <ul id="tabs" class="tabs">
                <li><a href="#">Tail</a></li>
                <li><a href="#">Access Log</a></li>
                <li><a href="#">Conduit Log</a></li>
            </ul>

               <div id="tail_box" class="tabbed-content">
           <div id="tail_print" class="print-area"></div>
            </div>

            <div id="access_content" class="tabbed-content">        
                  <div id="access_log_print" class="print-area"></div>
            </div>

            <div id="log_content" class="tabbed-content">
      <div id="log_keywords" class="keywords"></div>
                <div id="log_print" class="print-area"></div>
            </div>
    </div>

jQuery:

    document.getElementById("access_log_print").scrollTop = document.getElementById("access_log_print").scrollHeight;

But with no luck. All of the div’s with class="print-area" I need the scroll bar to be at the bottom.

Answer 1

If you are using jQuery then you can try this.

$('.print-area').each(function(){
    $(this).scrollTop($(this).prop('scrollHeight'));
});