在容器结束时停止滚动Div

Question

我正在创建电视指南，并已实现上一个和下一个按钮以滚动到下一个小时数，但是当我单击此滚动连续没有终点时。有没有什么办法可以在某个特定时刻阻止这种情况？即每个小时单元为100像素，因此滚动应停止在24x100 = 2400px。其中我使用此jquery的低于：

$（文件）。就绪（函数（）{

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()得到容器的底部postition。 然后添加一个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(); 
    } 
    }); 

希望它能帮助。