Question

我希望能够检测到用户是否使用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>

Answer 1

使用.scrollLeft()

可以轻松完成jQuery

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

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

这是一个fiddle模拟这个。

Answer 2

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

正在寻找一些工作示例我找到了JSFiddle，由@Merianos Nikos提供

它如何运作？

<强> 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() ;）

希望这有帮助。

向右滚动时检查

2 个答案: