Auto-scroll down does not work after modal run

Question

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/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

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/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>