1

そのため、「ページ」が途中にある垂直スクロール サイトがあります。ユーザーがスクロールを停止したときに、ブラウザーが最も表示されているページを揃えるようにします。

どの要素が表示されているかを見つける方法があり、単純なプラグインを使用して、スクロールが停止したときに発生するイベントがあります。

私が抱えている問題は、これを適切に利用する方法です。

スクロール停止時にインビューページの一番上までスクロールするようにブラウザをアニメーション化しています。ただし、これにより別のスクロールが開始され、すべてが再び起動され、奇妙な絶え間ないスクロールのバグが発生し、すべてがページ内でジャンプします。

ループを回避するためにこれを実装する別の方法のアイデアはありますか? 私は今、本当に立ち往生しています。

以下のコード。そして、アドバイスをありがとう。

$(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

したがって、最終的には、スクロール終了時に起動する関数に遅延を追加することでこれを解決しました。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);
于 2012-08-31T13:29:27.803 に答える