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

Question

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

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

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

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

Answer 1

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

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

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

Вы можете проверить положение DIV с помощью $(div).position() и проверить, если левый и верхний свойства полей меньше, чем 0:

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

Answer 3

Существует jQuery plugin here, который позволяет пользователям проверять, попадает ли элемент в видимое окно просмотра браузера, принимая во внимание положение прокрутки браузеров.

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

Вы также можете проверить для частичной видимости:

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

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

Answer 4

Я знаю, что это очень поздно, но этот плагин должен работать. 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 5

Я создал a small plugin that does this, и она имеет некоторые гибкие возможности (он также работает при изменении размера окна браузера).

Answer 6

Нет необходимости в плагине, чтобы проверить, находится ли внешний порт.

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 7

Ну ... Я нашел некоторые проблемы в каждом предлагаемом решении здесь.

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

Вот мое решение, которое включает 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 8

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

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

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