读取日志文件时如何让modal弹窗的滚动条自动滚动到底部

云原生阿岚

2026-10-7

实现方法

你之前滚动失败的核心原因是选错了滚动容器：产生滚动条的是设置了overflow-y: auto属性的.modal-body节点，而非外层的modal容器。

修改步骤

找到现有JS代码中注释掉的滚动逻辑位置，追加对应代码即可：
项目已引入jQuery的情况下可以直接用：

// 滚动modal-body到最底部
$('.modal-body').animate({ scrollTop: $('.modal-body')[0].scrollHeight }, 'fast');

想用原生JS实现可以用：

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

（可选优化）如果需要支持用户手动向上滚动查看历史时暂停自动滚动，可以额外加滚动事件监听，判断用户是否主动上滑后按需开关自动滚动逻辑即可。

修改后的完整JS代码

$(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() {
    var messages = xhr.responseText.split('\n');
    messages.slice(position, -1).forEach(function(value) {
      var item = document.createElement('li');
      item.textContent = value;
      output.appendChild(item);
    });
    position = messages.length - 1;

    // 新增自动滚动逻辑
    const modalBody = $('.modal-body');
    modalBody.animate({ scrollTop: modalBody[0].scrollHeight }, 'fast');
  }, 500);
});