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

Question

Мне нужно проверить с помощью jQuery, не падает ли элемент DIV за пределы экрана.Элементы видимы и отображаются в соответствии с атрибутами CSS, но они могут быть намеренно помещены за пределы экрана:

position: absolute; 
left: -1000px; 
top: -1000px;

. Я не могу использовать селектор jQuery :visible, так как элемент имеет ненулевую высоту иширина.

Я не делаю ничего фантастического.Это абсолютное позиционирование - то, как мой Ajax фреймворк реализует скрытие / отображение некоторых виджетов.

Answer 1

Зависит от того, каково ваше определение «за кадром».Это в окне просмотра или в пределах определенных границ вашей страницы?

Используя Element.getBoundingClientRect () , вы можете легко определить, находится ли ваш элемент в границах вашего окна просмотра (т.е. на экране или вне экрана):

jQuery.expr.filters.offscreen = function(el) {
  var rect = el.getBoundingClientRect();
  return (
           (rect.x + rect.width) < 0 
             || (rect.y + rect.height) < 0
             || (rect.x > window.innerWidth || rect.y > window.innerHeight)
         );
};

Вы можете использовать это несколькими способами:

// returns all elements that are offscreen
$(':offscreen');

// boolean returned if element is offscreen
$('div').is(':offscreen');

Answer 2

Здесь есть плагин jQuery , который позволяет пользователям проверить, попадает ли элемент в видимую область просмотра браузера, принимая во внимание положение прокрутки браузеров.

$('#element').visible();

Вы можететакже проверьте частичную видимость:

$('#element').visible( true);

Один недостаток заключается в том, что он работает только с вертикальным позиционированием / прокруткой, хотя добавить микширование в микс должно быть достаточно просто.

Answer 3

Не требуется плагин для проверки, если за пределами порта просмотра.

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
var d = $(document).scrollTop();

$.each($("div"),function(){
    p = $(this).position();
    //vertical
    if (p.top > h + d || p.top > h - d){
        console.log($(this))
    }
    //horizontal
    if (p.left < 0 - $(this).width() || p.left > w){
        console.log($(this))
    }
});

Answer 4

Хорошо ... Я нашел некоторые проблемы в каждом предложенном решении.

• Вы можете выбрать, хотите ли вы, чтобы весь элемент был на экране или только любая его часть
• Предлагаемые решения терпит неудачу, если элемент выше / шире, чем окно , а охватывает окно браузера.

Вот мое решение, которое включает jQuery .fn функцию экземпляра и expression. Я создал больше переменных внутри своей функции, чем мог бы, но для сложной логической задачи я хотел бы разделить ее на более мелкие, четко названные части.

Я использую getBoundingClientRect метод, который возвращает позицию элемента относительно области просмотра , поэтому мне не нужно заботиться о позиции прокрутки

Useage

$(".some-element").filter(":onscreen").doSomething();
$(".some-element").filter(":entireonscreen").doSomething();
$(".some-element").isOnScreen(); // true / false
$(".some-element").isOnScreen(true); // true / false (partially on screen)
$(".some-element").is(":onscreen"); // true / false (partially on screen)
$(".some-element").is(":entireonscreen"); // true / false 

Источник

$.fn.isOnScreen = function(partial){

    //let's be sure we're checking only one element (in case function is called on set)
    var t = $(this).first();

    //we're using getBoundingClientRect to get position of element relative to viewport
    //so we dont need to care about scroll position
    var box = t[0].getBoundingClientRect();

    //let's save window size
    var win = {
        h : $(window).height(),
        w : $(window).width()
    };

    //now we check against edges of element

    //firstly we check one axis
    //for example we check if left edge of element is between left and right edge of scree (still might be above/below)
    var topEdgeInRange = box.top >= 0 && box.top <= win.h;
    var bottomEdgeInRange = box.bottom >= 0 && box.bottom <= win.h;

    var leftEdgeInRange = box.left >= 0 && box.left <= win.w;
    var rightEdgeInRange = box.right >= 0 && box.right <= win.w;


    //here we check if element is bigger then window and 'covers' the screen in given axis
    var coverScreenHorizontally = box.left <= 0 && box.right >= win.w;
    var coverScreenVertically = box.top <= 0 && box.bottom >= win.h;

    //now we check 2nd axis
    var topEdgeInScreen = topEdgeInRange && ( leftEdgeInRange || rightEdgeInRange || coverScreenHorizontally );
    var bottomEdgeInScreen = bottomEdgeInRange && ( leftEdgeInRange || rightEdgeInRange || coverScreenHorizontally );

    var leftEdgeInScreen = leftEdgeInRange && ( topEdgeInRange || bottomEdgeInRange || coverScreenVertically );
    var rightEdgeInScreen = rightEdgeInRange && ( topEdgeInRange || bottomEdgeInRange || coverScreenVertically );

    //now knowing presence of each edge on screen, we check if element is partially or entirely present on screen
    var isPartiallyOnScreen = topEdgeInScreen || bottomEdgeInScreen || leftEdgeInScreen || rightEdgeInScreen;
    var isEntirelyOnScreen = topEdgeInScreen && bottomEdgeInScreen && leftEdgeInScreen && rightEdgeInScreen;

    return partial ? isPartiallyOnScreen : isEntirelyOnScreen;

};

$.expr.filters.onscreen = function(elem) {
  return $(elem).isOnScreen(true);
};

$.expr.filters.entireonscreen = function(elem) {
  return $(elem).isOnScreen(true);
};

Answer 5

Я создал небольшой плагин, который делает это , и у него есть несколько гибких опций (он также работает при изменении размера окна браузера).

Answer 6

Я знаю, что это немного поздно, но этот плагин должен работать.http://remysharp.com/2009/01/26/element-in-view-event-plugin/

$('p.inview').bind('inview', function (event, visible) {
if (visible) {
  $(this).text('You can see me!');
} else {
  $(this).text('Hidden again');
}

Answer 7

• Получите расстояние от вершины данного элемента
• Добавьте высоту того же данного элемента.Это скажет вам общее количество от верхней части экрана до конца данного элемента.

• Затем все, что вам нужно сделать, это вычесть это из общей высоты документа

  jQuery(function () {
      var documentHeight = jQuery(document).height();
      var element = jQuery('#you-element');
      var distanceFromBottom = documentHeight - (element.position().top + element.outerHeight(true));
      alert(distanceFromBottom)
  });
  

Answer 8

Вы можете проверить положение деления, используя $(div).position() и проверить, если свойства левого и верхнего полей меньше 0:

if($(div).position().left < 0 && $(div).position().top < 0){
    alert("off screen");
}