如何让滚动条保持在底部？

Question

我有一个执行特定任务的Web应用程序，并在Web应用程序中创建了一个选项卡框，可以将任何日志信息打印到指定区域。

从下面的代码中我可以看到，我有三个选项卡，当单击一个时，我有javascript和jQuery显示与该选项卡关联的div区域。在每个div区域下面都有一个嵌套的div，用于打印日志。

除滚动条不在底部之外，所有功能都很好。

我试过了：

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;

但没有运气。所有带有class="print-area"的div我需要滚动条位于底部。

Answer 1

如果您正在使用jQuery，那么您可以试试这个。

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