检查何时向右滚动答案

【问题标题】：Check when scrolled to the right检查何时向右滚动
【发布时间】：2013-10-17 04:53:40
【问题描述】：

我希望能够检测用户是否使用overlfow:scroll; 滚动浏览了整个 div 虽然 div 是水平的，所以在这里使用 offset().top 不起作用。
我目前有这个代码：

var elem = $('#slide');
var inner = $('#slidecontain');
if ( Math.abs(inner.offset().top) + elem.height() + elem.offset().top >= inner.outerHeight() ) {
  alert('bottom')
}

这非常适合检查我何时滚动到底部，但由于它是水平滚动，它会立即触发。我该如何切换？ offset().left 有可能吗？

这是 html，非常基本：

<div id="slide" style="width: 300px; height: 150px;">
        <div id="slidecontain" style="width: 900px; height: 150px;">
            <div class="slide1" style="width: 300px; height: 150px;"></div>
            <div class="slide2" style="width: 300px; height: 150px;"></div>
            <div class="slide3" style="width: 300px; height: 150px;"></div>
        </div>
<div>

【问题讨论】：

你也可以提供html（带有CSS）吗？

标签： jquery scroll offset horizontal-scrolling

【解决方案1】：

使用 .scrollLeft() 可以通过 jQuery 轻松完成

var elem = $('#slide');
var inner = $('#slidecontain');

elem.scroll(function() {
   if(elem.scrollLeft() + elem.width() == inner.width()) {
       alert("reached end!");
   }
});

这是一个模拟这个的fiddle。

【讨论】：

【解决方案2】：

在 jQuery 中有一个名为.scrollLeft() 的方法可以在这里使用。但以相反的方式。

在寻找一些工作示例时，我发现了@Merianos Nikos 提供的JSFiddle

它是如何工作的？

HTML：

<div class="inner">
    <div id="long"></div>
</div>

JS：

jQuery(document).ready(function ($) {
    var lastLeftLocation = 0;
    $('.inner').scroll(

    function (e) {
        if (lastLeftLocation > $(this).scrollLeft()) {

        } else {
            console.log("moved to right");
        }
        lastLeftLocation = e.currentTarget.scrollLeft;
    });
});

这里是jsfiddle2的简化版

仅供参考：没有反向方法.scrollRight() ;)

希望这会有所帮助。

【讨论】：