javascript - 修复了使用按钮滚动到下一个 div 的问题

Question

所以我有this code这允许我使用上一个和下一个按钮在div之间滚动，该脚本运行良好，尽管我试图找到一种方法来解决滚动时的一个小问题通常使用鼠标滚轮或滚动条，然后返回使用按钮滚动，按钮将页面滚动到我之前使用按钮滚动的位置，并且我希望它继续在我所在的位置，例如，如果我滚动鼠标滚轮直到 div nr.3，我希望当我单击下一个按钮时它继续滚动到 div nr.4。也许通过创建 :visible 语句或其他东西可以完成这项工作，但我不知道如何编写它。这是代码

$('div.postSection').first();

$('a.display').on('click', function(e) {
    e.preventDefault();

      var t = $(this).attr('id'),
      that = $(this);

    if (t === 'nextButton' && $('.currentPost').next('div.postSection').length > 0) {
        var $next = $('.currentPost').next('.postSection');
        var top = $next.offset().top;

        $('.currentPost').removeClass('currentPost');     
        $(function () {
               $next.addClass('currentPost');
               $('html, body').animate({scrollTop: $('.currentPost').offset().top-55 }, 'slow');

        });
  } else if (t === 'prevButton' && $('.currentPost').prev('div.postSection').length > 0) {
        var $prev = $('.currentPost').prev('.postSection');
        var top = $prev.offset().top;

        $('.currentPost').removeClass('currentPost');

        $(function () {
               $prev.addClass('currentPost');
               $('html, body').animate({scrollTop: $('.currentPost').offset().top-55 }, 'slow');
        });
  } 
});

Answer 1

您可以监视每个项目的滚动，并使用类或数据属性标记它们，以跟踪可见或不可见的内容。

或者，我刚刚发现的是一个不错的小选择器扩展，用于获取可见区域(视口(viewport) - 它的名字如此)中的项目。只需根据下一个或上一个点击获取第一个()或最后一个()并使用它即可。

视口(viewport):http://www.appelsiini.net/projects/viewport

扩展的工作原理如下:

$currentPS = $('.postSection:in-viewport').first();

然后您只需更新下一个和上一个:

var $next = $currentPS.next('.postSection');

var $prev = $currentPS.prev('.postSection');

看起来效果很好: http://jsfiddle.net/j7e9cogs/2/