检测 div 是否水平滚动 100px

Question

我正在尝试检测 div 是否已实时水平滚动 100px，并将 class 添加到 child，但没有成功。我做错了什么。

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

Answer 1

您需要在 jQuery 函数中执行此函数并在您的元素上获取事件滚动，然后在其上检查 scrollLeft()。

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>

检测 div 是否水平滚动 100px

Detect if a div has being scrooled 100px horizontaly

jquery

scroll