Auto-scroll down does not work after modal run-CodePudding

I have a boostrap 5.1.3 modal with some content, if the content is biger of 100px for the modal, a scrollbar should appear and go down automatically. But this does not happen and only works after clicking the scroll down button. Does anyone know the solution to the problem?

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Button trigger modal -->
<button type="button"  data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>
<!-- Modal -->
<div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div >
    <div >
      <div >
        <div  id="pmbox" style="position: relative; height: 100px; overflow-y: scroll; verflow-x: hidden;">
          <div  style="height: 200px;"> most scroll down auto </div>
        </div>
      </div>
      <div >
        <button type="button"  id="pmsend">scroll down</button>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

You can use setTimeout() in order to give an extra time for the modal render to end, and then you can call 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Button trigger modal -->
<button type="button" id="open"  data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>
<!-- Modal -->
<div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div >
    <div >
      <div >
        <h5  id="exampleModalLabel">Modal title</h5>
        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div >
        <div  id="pmbox" style="position: relative; height: 100px; overflow-y: scroll; verflow-x: hidden;">
          <div  style="height: 200px;"> most scroll down auto </div>
        </div>
      </div>
      <div >
        <button type="button"  id="pmsend">scroll down</button>
      </div>
    </div>
  </div>
</div>