Question

我对jQuery有一个小问题。我正在尝试使用水平滚动布局创建一个网站。通过这种布局，我想知道当元素在视口左侧时是否可以切换类。当div位于屏幕左侧时，我希望div更大，并且当被视口隐藏时返回到之前的大小。几乎像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');
    }
});

希望它有效！

当div位于视口左侧时，jQuery切换类

1 个答案: