使用jquery捕捉垂直滚动事件

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价值
• 垂直：以前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>