2

ページに画像のリストがあります。ページをスクロールすると、現在ビューポートにある画像のナビゲーションバーにいくつかのオプションを表示したいと思います。したがって、現在ビューポートにある画像要素を取得する必要がありますが、これは可能ですか?

ヤコブ

4

1 に答える 1

3

ビューポートに画像が 1 つしかないと誰が言いますか? たくさんあったら何をしたいですか？

ただし、それ以外の場合は、画像を含むコンテナーのスクロール位置と、画像の上部オフセットをいつでも取得して、現在表示されている画像を確認できます。

したがって、これらの値により結果が得られます

  • コンテナのスクロール位置
  • コンテナが見えるクライアントの高さ
  • 画像の上オフセット

これらの値を使用すると、画像が完全に表示されているか部分的に表示されているか (上部または下部) に関係なく、ビュー内のすべての画像を見つけることができます。

これは単純化されたJSFiddleで、最初の完全に表示された画像の周りに赤い境界線を付けます。コードはこれを行います：

// get top positions and references to all images
var pos = $("img").map(function(){
  var $this = $(this);
  return {
    el: $this,
    top: $this.offset().top
  };
}).get();

// provide document scrolling
$(document).on("scroll", function() {

  $("img").removeClass("first-in-view");

  var scroll = $(this).scrollTop();
  var i = 0;
  while(pos[i].top < scroll) i++;

  pos[i].el.addClass("first-in-view");

}).scroll();

これは、必要なときにのみクラスを切り替えるように最適化する必要があります。そうしないと、すべてのスクロールでちらつきが発生します。しかし、これを行う方法を示しており、ここから始めることができます。

重要

画像の位置を決定するプロセスをドキュメントの読み込みイベントにアタッチし、通常使用する DOM の準備が整っていないことが非常に重要です。これは、画像が最終的な位置になるようにドキュメントが読み込まれるのを待たなければならないためです。

于 2013-01-11T14:33:05.030 に答える