Question

所以我有一个垂直滚动网站，其中包含“页面”。我希望浏览器在用户停止滚动时对齐最常见的页面。

我有一个方法来查找哪个元素是inview，并且使用一个简单的插件我有一个事件在滚动停止时触发。

我遇到的问题是如何正确使用它。

我正在设置浏览器动画以滚动到滚动停止的inview页面顶部。然而，这会启动另一个滚动并再次触发所有内容，这会导致一些奇怪的常量滚动错误并导致它在页面上跳跃。

有没有人有任何不同的实现方法来避免循环？我现在真的很困难。

以下代码。并感谢您的任何建议。

$(window).bind('scrollstop', function(e){

//this grabs the ID of the div containing my h1 element. This is how I decide which 'page' is inview
var inview = '#' + $('.section-header:in-viewport:first').parent().parent().attr('id');

//then I grab the distance from the top, so that it can be scrolled to
var this_pos = $(inview).offset().top;  

//finally I animate the page to scroll to the top of the inview element.
$('html > body').animate({'scrollTop' : this_pos}, 200).delay(1000);


});

Answer 1

这样的事，也许？

$('body').animate({
    scrollTop: inview.offset().top - $('body').offset().top + $('body').scrollTop()
});

Answer 2

所以最后我通过在滚动结束时向函数触发添加延迟来解决这个问题。 100毫秒的延迟足以防止它过快发射并在不需要时用滚动调整页面。这导致页面上出现无限循环和怪异。

这是我的最终代码：

$(window).bind('scrollstop', function(e){

  var inview = '#' + $('.section-header:in-viewport:first').parent().parent().attr('id');
  var this_pos = $(inview).offset().top;    

  //animate to the top of the .page, with a 200 delay
   $('html > body').animate({'scrollTop' : this_pos}, 200);


  //a delay of 100 here is enough to stop a scrollend loop starting causing weirdness.
        }).delay(100);

jQuery动画页面'快照'在滚动结束时循环播放

2 个答案: