Question

我正在尝试使用jquery捕获div的垂直滚动事件。我用过：

$("#scrollDiv").on('scroll', function() {
  alert("hi");
});

但它会捕获所有卷轴。我如何只捕捉垂直滚动？

Answer 1

我懂了!! 对于仍然遇到麻烦的人： 1.使div溢出为无 2.给div一个高度和一个宽度 3.上面的代码它会起作用。

Answer 2

滚动事件不包含有关滚动方向/轴的信息，但实际滚动位置始终存储为可滚动容器的属性。您必须在某处缓存该值（例如，直接在元素上使用$ .data（））并在滚动到新滚动位置时进行比较。当您要求垂直滚动时，您必须检查scrollTop - 属性，水平滚动与scrollLeft一起使用。

$('#scrollDiv').on('scroll', function(e){

    var target = $(e.target);

    if(target.data('stored_scroll_top') == 'undefined') {
        target.data( 'stored_scroll_top', 0);
    }

    if (target.data('stored_scroll_top') != e.target.scrollTop) {
        alert('hi');
        target.data( 'stored_scroll_top', e.target.scrollTop);
    }
});

Answer 3

您可以在div中添加其他两个数据属性：

水平：前一个scrollLeft值
vertical：上一个scrollTop值

在滚动时，您可以比较这些值并确定发生了哪个滚动。

通过这种方式，您还可以了解滚动量。相反，如果您仅对发生的事件感兴趣，则可以只使用一个变量。

摘录：

$("#scrollDiv").data('horizontal', 0).data('vertical', 0).on('scroll', function (e) {
    var horizontal = $(this).data('horizontal');
    var vertical = $(this).data('vertical');
    var cHorizontal = this.scrollLeft;
    var cVertical = this.scrollTop;
    $(this).data('horizontal', cHorizontal);
    $(this).data('vertical', cVertical);
    if (horizontal != cHorizontal) {
        console.log('Horizontal scroll.....');
    }
    if (vertical != cVertical) {
        console.log('Vertical scroll.....');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="scrollDiv" style="overflow: scroll; width: 200px;height: 200px;white-space: nowrap;">
    This is a div element.......................................<br/>
    This is a div element.......................................<br/>
    This is a div element.......................................<br/>
    This is a div element.......................................<br/>
    This is a div element.......................................<br/>
    This is a div element.......................................<br/>
    This is a div element.......................................<br/>
    This is a div element.......................................<br/>
    This is a div element.......................................<br/>
    This is a div element.......................................<br/>
    This is a div element.......................................<br/>
    This is a div element.......................................<br/>
    This is a div element.......................................<br/>
    This is a div element.......................................<br/>
    This is a div element.......................................<br/>
    This is a div element.......................................<br/>
    This is a div element.......................................<br/>
    This is a div element.......................................<br/>
</div>

使用jquery捕获垂直滚动事件

3 个答案: