mCustomScrollbar

HTML

<script src="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="http://malihu.github.io/custom-scrollbar/3.0.0/jquery.mCustomScrollbar.min.css">
<div id="container1">
    
</div>

CSS

#container1 {
    height:200px;
    width:100px;
    padding:5px;
    border:1px solid black;
}

.mCSB_draggerRail{width:20px;}

JavaScript

var container1 = $('#container1');

for (var i = 0; i < 500; i++) {
    container1.append("<p>"+i+"</p>");
}

$('#container1').mCustomScrollbar({ 
        theme:"dark-3"        
});

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log($(mutation.target).css('top'));
  });    
});
 
// configuration of the observer:
var config = {attributes : true, attributeFilter : ['style']   };
 
// pass in the target node, as well as the observer options
observer.observe(document.getElementById('mCSB_1_container'), config);