用jQuery检测水平滚动div的结尾

所以，我有一些数据扔在div中。它按日期分成块。它使用jQuery和mousewheel插件水平滚动。用jQuery检测水平滚动div的结尾

我需要在div到达终点时触发一个事件（最左边，最右边）。我认为可以用当前实现的方式来计算何时不能通过检测鼠标滚轮插件中提取的数据来进一步滚动。我只需要朝正确的方向轻推。下面是做了水平滚动，我的代码：

$(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' 
    }); 
});

任何人都可以给我一些指导？谢谢！

来源

2011-05-11 jmorhardt

为什么看中滚动？如果你只是删除垂直滚动并设置'overflow-x：scroll'，它将水平滚动而不会破解。我猜想有些事情阻碍了你这样做？ – 2011-05-11 20:53:58

我正在使用不带滚动条的水平滚动效果的插件。这就像看着窗外，看到它前面的东西，没有别的。 – jmorhardt 2011-05-12 13:22:26

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

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

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

宽度也一样。看看divhere的例子。

来源

2011-05-11 21:43:54

感谢您的快速回复。与此同时，我实现了一个似乎能够满足我需要的插件。但是，通过这种解决方案，我能够消除插件的需求。 – jmorhardt 2011-05-12 13:23:28

有没有限制事件触发的方法？我希望它在您第一次滚动时不会再触发它。想法？ – jmorhardt 2011-05-12 13:24:13

没关系 - 我只是在触发事件时向对象添加一个类。然后我检查是否有该班级来决定是否再次发生事件。这听起来像是一个好的解决方案吗？ – jmorhardt 2011-05-12 13:27:42

这是您想要的代码。经证实，适用于IE，Safari，Chrome，Firefox等。

以下是HTML部分。

<div id="slide-wrap" style="width:1000px; height:200px; overflow:hidden; padding:0 auto;"> 
     <div id="inner-wrap" style="float:left;"> 
      <!-- 'Put Inline contains here like below.' --> 
      <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div> 
      <!-- ... --> 
      <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div> 
      <!-- 'Put Inline contains here like above.' --> 
     </div> 
     <div style="display: block; width:40px; height:60px; position: absolute; margin-left:0px; margin-top:40px"> 
      <img id='scroll_L_Arrow' src='../assets/img/l-arrow.png' onclick="scrollThumb('Go_L')"/> 
     </div> 
     <div style="display: block; width:40px; height:60px; position: absolute; margin-left:960px; margin-top:40px"> 
      <img id='scroll_R_Arrow' src='../assets/img/r-arrow.png' onclick="scrollThumb('Go_R')"/> 
     </div> 
    </div>

这里是jQuery在JavaScript函数中的一部分。

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(); 
      }); 
     } 
     }

来源

2013-02-20 16:58:52 NOTSermsak

$('.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') 
    } 
});

来源

2016-10-27 06:44:53 Sandhu

您可以通过说明这是为什么可以改善您的答案吗？ – 2016-10-27 06:47:29

用jQuery检测水平滚动div的结尾

回答

相关问题