Question

所以我有this code允许我使用上一个和下一个按钮在div之间滚动，虽然我试图找到一个解决一个小问题的方法，当我用鼠标滚轮或滚动条正常滚动，然后返回滚动按钮，按钮滚动页面到我以前用按钮滚动的位置，我希望这继续我在哪里，例如，如果我用鼠标滚动滚动到div nr.3，我希望它在我点击下一个按钮时继续滚动到div nr.4。也许通过创建：可见语句或某些东西可以完成这项工作，但我不知道如何编写它。这是代码

$('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单击的第一个（）或最后一个（），然后使用它。

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

1 个答案: