模态运行后自动向下滚动不起作用

Question

我有一个带有一些内容的 boostrap 5.1.3 模态，如果模态的内容大于 100 像素，滚动条应该出现 并自动向下滚动 。但这不会发生，只有在单击向下滚动按钮后才有效。有谁知道问题的解决方法吗？

refreshScroll();
const exampleModal = document.getElementById('exampleModal')
if(exampleModal){
  exampleModal.addEventListener('show.bs.modal',refreshScroll )
}   
var objDiv = document.getElementById("pmbox");
objDiv.scrollTop = objDiv.scrollHeight;
document.querySelector('#pmsend').addEventListener('click', function (e) {
  e.preventDefault();
  refreshScroll();
});
function refreshScroll(){
  var objDiv = document.getElementById("pmbox");
  if(objDiv)
  objDiv.scrollTop = objDiv.scrollHeight;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="card-body text-dark" id="pmbox" style="position: relative; height: 100px; overflow-y: scroll; verflow-x: hidden;">
          <div class="bg-info" style="height: 200px;"> most scroll down auto </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="pmsend">scroll down</button>
      </div>
    </div>
  </div>
</div>

Answer 1

你可以使用setTimeout()来给模态渲染额外的时间来结束，然后你可以调用refreshScroll()

    const pmbox = document.getElementById('pmbox')
if (exampleModal) {
   exampleModal.addEventListener('show.bs.modal', refreshScroll)
}

var objDiv = document.getElementById('pmbox')
objDiv.scrollTop = objDiv.scrollHeight
document.querySelector('#open').addEventListener('click', function (e) {
    e.preventDefault()
    setTimeout(() => {
        refreshScroll()
    }, 200);
})
document.querySelector('#pmsend').addEventListener('click', function (e) {
    e.preventDefault()
    refreshScroll()
})
function refreshScroll () {
    var objDiv = document.getElementById('pmbox')
    if (objDiv) objDiv.scrollTop = objDiv.scrollHeight
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Button trigger modal -->
<button type="button" id="open" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="card-body text-dark" id="pmbox" style="position: relative; height: 100px; overflow-y: scroll; verflow-x: hidden;">
          <div class="bg-info" style="height: 200px;"> most scroll down auto </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="pmsend">scroll down</button>
      </div>
    </div>
  </div>
</div>

模态运行后自动向下滚动不起作用

Auto-scroll down does not work after modal run

html

javascript

scroll

bootstrap5-modal

模态 运行 后自动向下滚动不起作用

Auto-scroll down does not work after modal run

html

javascript

scroll

bootstrap5-modal

模态运行后自动向下滚动不起作用