读取日志文件时如何自动滚动模式答案

【问题标题】：How to automatically scroll a modal when reading log file读取日志文件时如何自动滚动模式
【发布时间】：2021-10-25 00:50:28
【问题描述】：

当我通过单击按钮打开模式时，我希望滚动条自动转到底部。我正在阅读使用 XMLHTTP 请求更新的日志文件。下面是代码：

<style>

/*  The following customizes the modal for logging */

.modal-backdrop {
    display:none;
}

.modal-open .modal {
    width: 300px;
    margin: 0 auto;
}

#exampleModalLong {
  position: relative;
  overflow: auto;






}

.modal-dialog {
  position: fixed;

  width: 100%;
  margin: 0;
  padding: 10px;



  overflow-y: initial !important



}

.modal-body{
    height: 80vh;
    overflow-y: auto;


}




/*  old modal above */


   </style>

 <script>
    $(document).ready(function(){
      var output = document.getElementById('output');
      var xhr = new XMLHttpRequest();
      xhr.open('GET', '{{ url_for('stream') }}', true);
      xhr.send();
      var position = 0;



      setInterval(function() {
        // output.textContent = xhr.responseText;
        var messages = xhr.responseText.split('\n');
    messages.slice(position, -1).forEach(function(value) {
        // latest.textContent = value;  // update the latest value in place
        // build and append a new item to a list to log all output
        var item = document.createElement('li');
        item.textContent = value;
        output.appendChild(item);

    });
    position = messages.length - 1;

    // $('#exampleModalLong').animate({ scrollTop: $('#exampleModalLong .modal-content').height() }, 'slow');
    // $("#exampleModalLong").animate({ scrollTop: $("#exampleModalLong").height() }, "slow");

  



      }, 500);
    });
  </script>

<body>

<!-- Modal -->
            <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle">
              <div class="modal-dialog  mw-100 w-75" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">DENA Logging</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <!-- <pre id="output"></pre> -->
                    <ul id="output"></ul>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
        <!-- Modal -->

</body>

如何强制滚动条从底部显示列表的最后一项？我正在使用模式来显示无序项目的列表。当用户单击按钮时，将显示此模式。

谢谢！

【问题讨论】：

我看到你的滚动是在输出 div 的父级上，我已经在下面更新了我的答案。看看吧
它有效。谢谢 UtkarshDixit

标签： javascript jquery bootstrap-4 bootstrap-modal

【解决方案1】：

您的modal-body 是正在滚动的元素，因此只需修改“modal-body”的scrollBottom 即可。

 ... // <--- commented out for sanity
setInterval(function() {
            // output.textContent = xhr.responseText;
            var messages = xhr.responseText.split('\n');
        messages.slice(position, -1).forEach(function(value) {
            // latest.textContent = value;  // update the latest value in place
            // build and append a new item to a list to log all output
            var item = document.createElement('li');
            item.textContent = value;
            output.appendChild(item);
            output.parentNode.scrollTop = output.parentNode.scrollHeight;
        });

【讨论】：

【解决方案2】：

只需选择 div 并将scrollTop 设置为等于scrollHeight：

var objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;

【讨论】：

【解决方案3】：

将项目附加到output 后，您可以将output div 滚动到底部，如下所示：

output.appendChild(item)

const modalBody = document.querySelector('.modal-body')
modalBody.scrollTop = modalBody.scrollHeight

【讨论】：

它没有对滚动条做任何事情。