Jak sprawdzić, czy element jest w widoku użytkownika z jquery

Question

Mam bardzo duży przeciągalny div w moim oknie. Ten div ma mniejsze okno.

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

Skąd mogę wiedzieć, czy element li jest widoczny w widoku użytkownika (mam na myśli naprawdę widoczne, a nie w obszarze przepełnienia)?

Answer 1

spojrzeć this plugin

To daje ty możliwość wykonywania następujących selektorów

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

Answer 2

Aby sprawdzić, czy element znajduje się w bieżącym veiwport:

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

(Source)

Dla większej wytrzymałości metoda, polecam Viewport Selectors, które pozwalają po prostu zrobić:

$("#elem:in-viewport") 

Answer 3

Moje rozwiązanie używa podanym przykładzie kodu, a będzie wam pokazać ogólną ideę, jak ustalić, czy element li jest widoczny. Sprawdź kod jsFiddle, który zawiera kod z Twojego pytania.

Metoda jQuery .offset() pozwala nam pobrać bieżącą pozycję elementu względem dokumentu. Jeśli klikniesz na element li wewnątrz przeciągania, twoje przesunięcie od góry będzie zawierać się w przedziale od 0 do 500, a przesunięcie od lewej powinno zawierać się między 0 a 500. Jeśli wywołasz funkcję przesunięcia elementu, który nie jest aktualnie widoczny, przesunięcie będzie mniejsze niż 0 lub większe niż 500 od przesunięcia górnego lub lewego.

Jeśli nie jest to trudne zadanie Zawsze lubię kodować to, czego potrzebuję od "zdrapki", to daje mi większą elastyczność przy konieczności modyfikacji lub debugowania, dlatego polecam zajrzeć do funkcji przesunięcia jQuery zamiast używać wtyczki . Jeśli to, co próbujesz osiągnąć, jest dość proste, użycie własnej funkcji da ci mniejszą bibliotekę do załadowania.

Answer 4

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. 

Answer 5

ja używam (sprawdza, czy element jest co najmniej częściowo w widoku) podany kod:

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