Как проверить, находится ли элемент в представлении пользователя с помощью 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 элемент виден в окне просмотра пользователя (я имею в виду действительно видимый, а не в области переполнения)?

17
javascript jquery viewport

5 ответов

посмотреть плагин

это дает вам возможность сделать следующие селекторы

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

чтобы проверить, находится ли элемент в текущем 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)
  );
}

(источник)

для более надежного метода, я бы рекомендовала Селекторы Видового Экрана, которые позволяют вам просто сделать:

$("#elem:in-viewport")
23

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

мое решение-используя данный пример кода, и он покажет вам общее представление о том, как определить, является ли элемент li видна. Проверьте jsFiddle, который содержит код из вашего вопроса.

jQuery .метод offset () позволяет получить текущее положение элемента относительно документа. Если вы нажмете на элемент li внутри перетаскиваемого, ваше смещение сверху будет между 0 и 500, а смещение слева должно быть от 0 до 500. При вызове функции смещения элемента, который в данный момент не отображается, смещение будет меньше 0 или больше 500 от верхнего или левого смещения.

Если это не сложная задача, мне всегда нравится кодировать то, что мне нужно от "scrath", это дает мне большую гибкость при изменении или отладке, поэтому я бы рекомендовал использовать функцию смещения jQuery вместо использования плагина. Если то, что вы пытаетесь сделать, довольно просто, использование вашей собственной функции даст вам на одну библиотеку меньше для загрузки.

0

Я использую (проверяет, находится ли элемент хотя бы частично в представлении) следующий код:

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