javascript - 无法获取水平滚动位置

Question

我想要获取 div 的水平滚动位置，但我不明白为什么这不起作用。

这是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

您的代码正在执行的操作是，当文档准备就绪(即 0)时，它会获取 scrollLeft() 的值，并且该值永远不会更改。当 .demo 事件的滚动发生变化时，您需要捕获一个事件。像这样的事情:

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