使用jQuery检测水平滚动div的结束

所以，我在div中得到了一些数据。 它按日期分成几块。 它使用jQuery和mousewheel插件水平滚动。

当div达到它的终点（最左边，最右边）时，我需要发射一个事件。 我认为通过检测在mousewheel插件中获取的数据，可以通过当前实现的方式来计算何时无法进一步滚动。 我只需要朝着正确的方向轻推。 这是为我进行水平滚动的代码：

$(document).ready(function () { $('#timeline').mousedown(function (event) { $(this) .data('down', true) .data('x', event.clientX) .data('scrollLeft', this.scrollLeft); return false; }).mouseup(function (event) { $(this).data('down', false); }).mousemove(function (event) { if ($(this).data('down') == true) { this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX; } }).mousewheel(function (event, delta) { this.scrollLeft -= (delta * 30); }).css({ 'overflow' : 'hidden', 'cursor' : '-moz-grab' }); }); 

任何人都可以给我一些方向吗？ 谢谢！

Answer 1

嘿，我已经为你准备了一个实施页面。 您可以看到如何使用jQuery检测滚动区域的结尾。

对于整个文档，您必须在javascript中检测.scrollTop是否已等于.scrollHeight 。 使用jQuery，它将检测：

 if ( $(document).scrollTop() == ( $(document).height() - $(window).height() ) { // Do something here ... } 

宽度也是如此。 在这里看一下div例子。

Answer 2

这是您想要的代码。 事实certificate它适用于IE，Safari，Chrome，Firefox等。

这是HTML部分。

这是JavaScript函数中的jQuery部分。

  function scrollArrowShow() { var maxScroll = ($('#inner-wrap').width() - $('#slide-wrap').scrollLeft()) - $('#slide-wrap').width(); if ( 0 == $('#slide-wrap').scrollLeft()) { $('#scroll_L_Arrow').css({visibility: 'hidden'}); }else{ $('#scroll_L_Arrow').css({visibility: 'visible'}); } if ( 0 == maxScroll) { $('#scroll_R_Arrow').css({visibility: 'hidden'}); }else{ $('#scroll_R_Arrow').css({visibility: 'visible'}); } } function scrollThumb(direction) { if (direction=='Go_L') { $('#slide-wrap').animate({ scrollLeft: "-=" + 250 + "px" }, function(){ // createCookie('scrollPos', $('#slide-wrap').scrollLeft()); scrollArrowShow(); }); }else if (direction=='Go_R') { $('#slide-wrap').animate({ scrollLeft: "+=" + 250 + "px" }, function(){ // createCookie('scrollPos', $('#slide-wrap').scrollLeft()); scrollArrowShow(); }); } } 

Answer 3

 $('.div-with-scrollbar').scroll(function () { var $elem = $('.div-with-scrollbar'); var newScrollLeft = $elem.scrollLeft(), width = $elem.width(), scrollWidth = $elem.get(0).scrollWidth; var offset = 0; if (scrollWidth - newScrollLeft - width === offset) { alert('right end') } if (newScrollLeft === 0) { alert('left') } });