I have been working on a modal that should display an alert when the scrollbar reaches the bottom. Despite my efforts to research a solution, I am struggling to detect this specific event within the modal. The desired outcome is for an alert to pop up once the scrollbar hits the bottom of the modal.
Below is the code snippet in question:
$(".modal-body").scroll(function(){
if($('#prev').height() == ($(this).scrollTop() + $(this).height())){
alert("reached bottom!!")
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32505d5d46414640534272071c021c021f5057465301">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"style="height: 400px; overflow:auto;">
<pre id="prev"style="display: inline-block; height: 900px"> </pre>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>Despite spending an hour attempting to make it work, I still can't figure out how to detect the scrollbar hitting the bottom in the modal. Any assistance would be greatly appreciated!