修复使用按钮滚动到下一个 div

Question

所以我有this code，它允许我使用 previous 和 next 按钮在 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

您可以监控每个项目的滚动并使用类或数据属性对其进行标记，以跟踪哪些内容可见或不可见。

或者，我刚刚发现，是一个不错的小选择器扩展，用于在可见区域（视口 - 它被命名）中获取项目。只需根据 Next 或 Prev 单击获取 first() 或 last() 即可。

视口：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/