2

私は現在、スクロール時に一連のアニメーションとグラフィックイベントがトリガーされるWebサイトを構築しています（派手なものを知っています）。スクロールがページをどれだけ下ったかを測定する方法を決定しようとしています。

オプション 1、ピクセル単位で測定し、イベントをトリガーします。

$(document).scroll(function(){
  var scrolllength  = $(window).scrollTop()

switch(key) {
  case 84:
    foo();
    break;
  case 185:
    bar();
    break;
  default:
    return;
}

長所：おそらく速い

短所: 何かの高さが変わると、手動で測定して更新する必要があります。これは静的な座り方ですが、多くの微調整と調整が必要になると思います。

オプション 2、DOM 要素の追跡。

$(document).scroll(function(){
  //this will be a bunch of differnt ones but for example
  if(isScrolledIntoView('#div'){
    $('body').css('background','black');
  }
}

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

長所: 動的で、コンテンツにとらわれない

短所：スクロールがトリガーされるたびにトリガーされるため、このアプローチではスクロールがスムーズでなくなるリスクがあるのではないかと心配しています。このような性質のものを少なくとも 20 個はチェックする予定です。ページはさまざまなセグメントに分割されます。まず、どのセグメントが表示されているかを確認してから、その特定のセグメント内のアイテムをもう一度確認することもできます。

もちろん、私はより多くの選択肢を受け入れています！

4

2 に答える 2

-1

いい答え。学習内容。

私は少しフィドルリンクを作りました

このステートメントの問題は、switch等しいかどうかをチェックし、ユーザーが通常スクロールし続けることです。とにかく、スイッチで動作させることができなかったので、代わりに不等式を使用しました。

于 2013-06-23T08:34:27.807 に答える