When I open a modal by clicking on a button, I would like the scrollbar to automatically go to the bottom. I am reading the logfile as it is updated using XMLHTTP request. Below is the code:
<style>
/* The following customizes the modal for logging */
.modal-backdrop {
display:none;
}
.modal-open .modal {
width: 300px;
margin: 0 auto;
}
#exampleModalLong {
position: relative;
overflow: auto;
}
.modal-dialog {
position: fixed;
width: 100%;
margin: 0;
padding: 10px;
overflow-y: initial !important
}
.modal-body{
height: 80vh;
overflow-y: auto;
}
/* old modal above */
</style>
<script>
$(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() {
// output.textContent = xhr.responseText;
var messages = xhr.responseText.split('\n');
messages.slice(position, -1).forEach(function(value) {
// latest.textContent = value; // update the latest value in place
// build and append a new item to a list to log all output
var item = document.createElement('li');
item.textContent = value;
output.appendChild(item);
});
position = messages.length - 1;
// $('#exampleModalLong').animate({ scrollTop: $('#exampleModalLong .modal-content').height() }, 'slow');
// $("#exampleModalLong").animate({ scrollTop: $("#exampleModalLong").height() }, "slow");
}, 500);
});
</script>
<body>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle">
<div class="modal-dialog mw-100 w-75" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">DENA Logging</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- <pre id="output"></pre> -->
<ul id="output"></ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
</body>
How to enforce the scrollbar to show the last item of the list from the bottom? I am using a modal to show the list of unordered items. This modal will be shown when a user clicks on a button.
Thank you!
Your modal-body is the element that is getting scrolled, so just modifying scrollBottom of "modal-body" would do.
... // <--- commented out for sanity
setInterval(function() {
// output.textContent = xhr.responseText;
var messages = xhr.responseText.split('\n');
messages.slice(position, -1).forEach(function(value) {
// latest.textContent = value; // update the latest value in place
// build and append a new item to a list to log all output
var item = document.createElement('li');
item.textContent = value;
output.appendChild(item);
output.parentNode.scrollTop = output.parentNode.scrollHeight;
});