Detect if a div has being scrooled 100px horizontaly-CodePudding

Im tryin to detect if a div has being scrooled 100px horizontaly in real time, and add a class to a child, without success. What I am doing wrong.

if($("section.flow .right").scrollLeft(100)){
        $("section.flow li").addClass("active");
}

CodePudding user response：

You need to execute this function in jQuery function and get event scroll on your element then check scrollLeft() on it.

jQuery(function ($) {
  $('div.test').on('scroll', function () {
    console.clear();
     
    if($(this).scrollLeft() >= 100) {
      $(this).addClass("active");
      console.log('Egal or higher than 100');
    } else {
      $(this).removeClass("active");
      console.log($(this).scrollLeft());
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test" style="border:1px solid black;width:100px;height:130px;overflow:auto">
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
</div><br>