javascript - 当 div 位于视口(viewport)左侧时，jQuery 切换类

Question

我有一个关于 jQuery 的小问题。 我正在尝试创建一个具有水平滚动布局的网站。使用此布局，我想知道当元素位于视口(viewport)左侧时是否可以切换类。当此 div 位于屏幕左侧时，我希望 div 更大，并在被视口(viewport)隐藏时返回到以前的大小。几乎像 iTunes 封面幻灯片效果。 http://www.jqueryrain.com/demo/jquery-coverflow/ . 我知道可以使用 ScrollTop 进行垂直滚动，使用 jQuery 进行偏移函数，但我没能找到一种方法来使用水平滚动。

这是html

<div id="wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

这是CSS

html {
  height:100%;
}

body {
  height:100%;
  overflow-x:scroll;
  overflow-y:hidden;
  width: auto;
}

#wrap {
}

div {
  width:150px;
  height:150px;
  border:1px solid black;
  display:inline-block;
  white-space:nowrap;
}

这里是 jsfiddle http://jsfiddle.net/x8x8z76a/

如果有人能帮助我，我将不胜感激。 非常感谢。

Answer 1

我做了一个小FIDDLE在这里。

如果您想添加/删除检测精度，您可以轻松修改 nearOffsetPixels。

JS:

var lastScrollLeft = 0;
var divOffsetRight = $('#9').offset().left + $('#9').width();
var nearOffsetPixels = 5;
$(window).scroll(function() {
    var documentScrollLeft = $(document).scrollLeft();
    var documentScrollRight;
    if (lastScrollLeft != documentScrollLeft) {
        lastScrollLeft = documentScrollLeft;
        documentScrollRight = documentScrollLeft + $(window).innerWidth();
        if((documentScrollRight > divOffsetRight - nearOffsetPixels) &&
          (documentScrollRight < divOffsetRight + nearOffsetPixels)) alert('reached');
    }
});

希望它有用!