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

Question

当我通过单击按钮打开模式时，我希望滚动条自动转到底部。我正在阅读日志文件，因为它是使用 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>

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

谢谢！

Answer 1

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

output.appendChild(item)

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

Answer 2

您的 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;
        });

Answer 3

简单地 select div 并设置 scrollTop 等于 scrollHeight:

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

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

How to automatically scroll a modal when reading log file

javascript

jquery

bootstrap-4

bootstrap-modal