web-dev-qa-db-de.com

So prüfen Sie, ob ein Element in der Ansicht des Benutzers mit Jquery angezeigt wird

Ich habe ein sehr großes ziehbares divin meinem Fenster. Dieser divhat ein kleineres Fenster.

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

Wie kann ich wissen, ob das Element liim Viewport des Benutzers sichtbar ist (ich meine wirklich sichtbar, nicht im Überlaufbereich)?

18
Sebastien

schau mal nach dieses Plugin

Sie haben die Möglichkeit, die folgenden Selektoren auszuführen

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

So prüfen Sie, ob sich ein Element im aktuellen Ansichtsfenster befindet:

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)
  );
}

( Quelle )

Für eine robustere Methode empfehle ich Viewport Selectors , wodurch Sie einfach Folgendes tun können:

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

Ich verwende (prüft, ob ein Element zumindest teilweise in der Ansicht ist) folgenden Code: 

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

Meine Lösung verwendet das angegebene Codebeispiel und zeigt Ihnen eine allgemeine Vorstellung davon, wie Sie feststellen können, ob das Element li sichtbar ist. Schauen Sie sich das jsFiddle an, das Code aus Ihrer Frage enthält.

Die jQuery .offset () -Methode ermöglicht es uns, die aktuelle Position eines Elements relativ zum Dokument abzurufen. Wenn Sie auf ein li-Element innerhalb des ziehbaren Elements klicken, liegt Ihr Versatz von oben zwischen 0 und 500, und der Versatz von links sollte zwischen 0 und 500 liegen. Wenn Sie die Versatzfunktion eines Elements aufrufen, das derzeit nicht sichtbar ist, Der Versatz ist entweder vom oberen oder vom linken Versatz kleiner als 0 oder größer als 500.

Wenn es keine gewaltige Aufgabe ist, codiere ich immer das, was ich von 'scrath' brauche, es gibt mir mehr Flexibilität beim Modifizieren oder Debuggen. Deshalb würde ich empfehlen, die Offset-Funktion von jQuery zu verwenden, anstatt ein Plugin zu verwenden. Wenn das, was Sie erreichen wollen, ziemlich einfach ist, erhalten Sie mit Ihrer eigenen Funktion eine weniger zu ladende Bibliothek.

0
Jose Vega