我怎样才能使滚动条保持在底部

How can I get the scrollbar to stay at the bottom?

本文关键字：底部 滚动条      更新时间：2023-09-26

我有一个执行特定任务的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都需要滚动条位于底部。

如果您使用的是jQuery，那么您可以尝试一下。

$('.print-area').each(function(){
    $(this).scrollTop($(this).prop('scrollHeight'));
});
相关文章：