web-dev-qa-db-ja.com

jqueryを使用して要素がユーザーのビューにあるかどうかを確認する方法

ウィンドウに非常に大きなドラッグ可能なdivがあります。このdivのウィンドウは小さくなっています。

<div id="draggable-area" style="width:500px;height:500px;overflow:hidden">
 <div id="draggable" style="width:5000px;height:5000px">
     <ul>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         <li></li>
         ....
     </ul>
  </div>
</div>

li要素がユーザービューポートに表示されているかどうか（つまり、オーバーフロー領域ではなく実際に表示されているかどうか）を確認するにはどうすればよいですか？

javascriptjqueryviewport
17
Sebastien

見てください このプラグイン

次のセレクターを実行するオプションがあります

$(":in-viewport")
$(":below-the-fold")
$(":above-the-top")
$(":left-of-screen")
$(":right-of-screen")
22
Manuel van Rijn

要素が現在のビューポートにあるかどうかを確認するには：

function elementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    (top + height) <= (window.pageYOffset + window.innerHeight) &&
    (left + width) <= (window.pageXOffset + window.innerWidth)
  );
}

（ ソース ）

より堅牢な方法として、 ビューポートセレクター をお勧めします。これにより、次のことが可能になります。

$("#elem:in-viewport")
24
Alex Peattie

https://github.com/sakabako/scrollMonitor

var scrollMonitor = require("./scrollMonitor"); // if you're not using require, you can use the scrollMonitor global.
var myElement = document.getElementById("itemToWatch");

var elementWatcher = scrollMonitor.create( myElement );

elementWatcher.enterViewport(function() {
    console.log( 'I have entered the viewport' );
});
elementWatcher.exitViewport(function() {
    console.log( 'I have left the viewport' );
});

elementWatcher.isInViewport - true if any part of the element is visible, false if not.
elementWatcher.isFullyInViewport - true if the entire element is visible [1].
elementWatcher.isAboveViewport - true if any part of the element is above the viewport.
elementWatcher.isBelowViewport - true if any part of the element is below the viewport.
1
trushkevich

次のコードを使用しています（要素が少なくとも部分的にビューにあるかどうかを確認します）。

var winSize;

function getWindowSize() {
            var winW,WinH = 0;
            if (document.body && document.body.offsetWidth) {
                winW = document.body.offsetWidth;
                winH = document.body.offsetHeight;
            }
            if (document.compatMode == 'CSS1Compat' &&
                document.documentElement &&
                document.documentElement.offsetWidth) {
                winW = document.documentElement.offsetWidth;
                winH = document.documentElement.offsetHeight;
            }
            if (window.innerWidth && window.innerHeight) {
                winW = window.innerWidth;
                winH = window.innerHeight;
            }
            return {w:winW, h:winH};
        }

winSize = getWindowSize();    

function inView(element) {
                var box = element.getBoundingClientRect();
                if ((box.bottom < 0) || (box.top > winSize.h)){
                    return false;
                }
                return true;
            }
0
Lumic

GetBoundingClientRect（）を使用した最新の方法については、次のようにします。

var isInViewport = function (elem) {
    var bounding = elem.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

要素が完全にビューポートにある場合はtrueを返し、そうでない場合はfalseを返します。

var myElem = document.querySelector('#draggable');
if (isInViewport(myElem)) {
    // Do something...
}

完全な説明が見つかりました ここ 。

0
Maze

私の解決策は、与えられたコード例を使用しており、li要素が表示されているかどうかを判断する方法の全体的なアイデアを示しています。あなたの質問からのコードを含む jsFiddle をチェックしてください。

JQuery .offset（）メソッドを使用すると、ドキュメントに対する要素の現在の位置を取得できます。ドラッグ可能な内部のli要素をクリックすると、上からのオフセットは0〜500になり、左からのオフセットは0〜500になります。現在表示されていないアイテムのオフセット関数を呼び出すと、オフセットは、上または左のオフセットから0未満または500を超えます。

それが困難な作業ではない場合、私は常に「scrath」から必要なものをコーディングするのが好きです。それにより、変更またはデバッグする必要があるときに柔軟性が増します。したがって、プラグインを使用する代わりにjQueryのオフセット関数を使用することを検討することをお勧めします。達成しようとしていることがかなり単純な場合は、独自の関数を使用すると、ロードするライブラリが1つ少なくなります。

0
Jose Vega