how to detect div scroll and also detect scrolled at bottom in jquery and bootstrap code example

Example: how to detect div scroll and also detect scrolled at bottom in jquery and bootstrap

// html (bootstrap used for quick design)


<div class="row mx-auto">
  <div class="col-4 border overflow-auto scrolling" id="one" style="height: 300px;">
    <div class="min-vh-100 bg-danger scroll-body" data-fetch="{url}" >
     <!- your data here -->
    </div>
  </div>  
</div>


// jquery code

$(document).ready(function(){  
	$(".scrolling, window").scroll(function(){    
    	  var position = $(this).scrollTop();    
        var bottom = $(this).children(".scroll-body").height() - $(this).height();  
        if (position == bottom)
        {
          	// do something
         	console.log(
            	'position : ' + $(this).scrollTop() + '<br>' +
            	'bottom : ' + ( $(this).children(".scroll-body").height() - $(this).height() )
            );	
        }
	});  
});