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

Question

所以我有 this code，它允许我在 div 之间滚动 previous 和 next按钮，脚本运行良好，尽管我试图找到一种方法来解决一个小问题，即当我使用鼠标滚轮或滚动条正常滚动然后返回使用按钮滚动时，按钮将页面滚动到我所在的位置之前使用按钮向左滚动，我希望它继续我所在的位置，例如，如果我使用鼠标滚轮滚动到 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

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

或者，我刚刚发现的是一个不错的小选择器扩展，用于在可见区域（视口 - 并以此命名）中获取项目。只需根据 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/

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

Fix for Scroll to the next div with buttons

javascript

jquery

scroll