无法获得水平滚动位置

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')
  })
});