1

所以我有一个垂直滚动网站，上面有“页面”。我希望浏览器在用户停止滚动时对齐最可查看的页面。

我有一种方法可以找到哪个元素是 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);


});
4

2 回答 2

1

像这样的东西，也许？

$('body').animate({
    scrollTop: inview.offset().top - $('body').offset().top + $('body').scrollTop()
});​
于 2012-08-31T11:04:34.360 回答
0

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

这是我的最终代码：

$(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);
于 2012-08-31T13:29:27.803 回答