Question

我正在创建一个电视指南，并已实现上一个和下一个按钮滚动到下一个小时，但是当我点击此按钮时，滚动是连续的，没有终点。有没有办法在特定点停止这个？即每小时单元格为100px，因此24x100 = 2400px，滚动应停止。我正在使用的jquery如下：

$（document）.ready（function（）{

var $item = $('.timeCell, .cellProgram'), 
    visible = 2, 
    index = 0, 
    endIndex = ( $item.length / visible ) - 1; 

$('div#arrowR').click(function(){
    if(index < endIndex ){
      index++;
      $item.animate({'left':'-=246px'});
    }
});

$('div#arrowL').click(function(){
    if(index > 0){
      index--;            
      $item.animate({'left':'+=246px'});
    }
});

}）;

非常感谢任何帮助，谢谢：）

Answer 1

您应该使用$selector.offset().top和$selector.outerHeight()来获取容器的底部邮件。然后添加一个eventListenner滚动事件，以检查当前位置是否与您的条件匹配。

示例：

 var $selector = $('.class-selector');
 if($selector.length == 0) {
    return;
 }
 var triggerPosition = $selector.offset().top + $selector.outerHeight(); // position of container's bottom

 $(window).on('scroll', function(){
      var windowTopPosition = $(window).scrollTop()
        , windowBottomPosition = windowTopPosition  + $(window).height(); // depend on your idea, use the top or bottom as currentPosition
     var currentPosition = windowBottomPosition' // in this i.e, I use the bottom.

     if( currentPosition > triggerPosition) {
           // trigger if those bottom meet each other , such as:
           stopScroll();
     } else { 
          // trigger when windows is above the container's bottom, such as:
          continuousScroll(); 
     }
  });

希望它有所帮助。

在Container末尾停止滚动Div

1 个答案: