如何在使用jQuery进行水平滚动的元素中获得第一个完全可见的元素?

时间:2014-06-20 19:49:43

标签: javascript jquery horizontal-scrolling

我需要使用jQuery获取在可滚动DIV中完全可见的第一个元素。我很接近,但有些事情是对的。

有人能发现问题吗?

$('div').on('scroll', function () {
  var cutoff = $(this).scrollLeft();

  $('li').removeClass('firstVisible').each(function () {
    var $this = $(this);

    if ($this.offset().left > cutoff) {
      $this.addClass('firstVisible');

      return false; // stops the iteration after the first one on the screen
    }
  });

  console.log($('li.firstVisible').index());
});

JSFiddle

1 个答案:

答案 0 :(得分:1)

$this.offset()将返回相对于文档的位置(而不是滚动的div),因此要检查可见性,需要将其与div位置进行比较(不向左滚动)

$('div').on('scroll', function () {
var cutoff = $(this).offset().left;

$('li').removeClass('firstVisible').each(function () {
    var $this = $(this);

    if ($this.offset().left >= cutoff) {
        $this.addClass('firstVisible');

        return false; // stops the iteration after the first one on the screen
    }
});

这是一个例子:http://jsfiddle.net/axwR7/2/