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