Как проверить, находится ли элемент в представлении пользователя с помощью jquery

Ответ 1

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

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

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

Ответ 2

Чтобы проверить, находится ли элемент в текущем каталоге:

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

(Источник)

Для более надежного метода я бы рекомендовал Viewport Selectors, который позволяет вам просто:

$("#elem:in-viewport")

Ответ 3

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.

Ответ 4

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

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

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

Ответ 5

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

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