Can't get horizontal Scroll position

Question

I want to get horizontal scroll Position of my div and I can't get why this isn't working.

Here's Codepen example .

HTML

<div class='demo'>dsannbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbnbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>

CSS

.demo {
  overflow-x: auto;
  height: 50px;
}

JS

$(document).ready(function(){
    if($(this).scrollLeft() >= 100){
         alert();   
    }
}); 

Answer 1

What you code is doing, is it's getting the value of scrollLeft() when the document is ready (which is 0) and it never changes. You need an event to capture when the scroll of the .demo event is changing. Something like this:

$(document).ready(function(){
  $('.demo').on('scroll', function() {
    var val = $(this).scrollLeft()
    if (val >= 100) alert('Hello')
  })
});