Muszę sprawdzić w jQuery, czy element DIV nie spada poza ekran. Elementy są widoczne i wyświetlane zgodnie z atrybutami CSS, ale można je celowo umieścić poza ekranem poprzez:
position: absolute;
left: -1000px;
top: -1000px;
Nie mogłem użyć :visibleselektora jQuery , ponieważ element ma niezerową wysokość i szerokość.
Nie robię nic wymyślnego. To absolutne umieszczenie pozycji jest sposobem, w jaki mój framework Ajax implementuje ukrywanie / pokazywanie niektórych widżetów.
Odpowiedzi:
Zależy od tego, jaka jest Twoja definicja pojęcia „poza ekranem”. Czy to jest w widocznym obszarze, czy w określonych granicach twojej strony?
Używając Element.getBoundingClientRect () możesz łatwo wykryć, czy twój element znajduje się w granicach twojego widocznego obszaru (tj. Na ekranie lub poza ekranem):
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)
);
};
Możesz wtedy użyć tego na kilka sposobów:
// returns all elements that are offscreen
$(':offscreen');
// boolean returned if element is offscreen
$('div').is(':offscreen');
Jest tutaj wtyczka jQuery, która pozwala użytkownikom sprawdzić, czy element mieści się w widocznym obszarze przeglądarki, biorąc pod uwagę pozycję przewijania przeglądarki.
$('#element').visible();
Możesz również sprawdzić częściową widoczność:
$('#element').visible( true);
Jedną wadą jest to, że działa tylko z pozycjonowaniem / przewijaniem w pionie, chociaż dodanie pozycjonowania poziomego do miksu powinno być dość łatwe.
Nie ma potrzeby używania wtyczki, aby sprawdzić, czy jest poza portem widoku.
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))
}
});
$(this).offsetzamiast $this.position. W tej chwili oblicza tylko odległość od swojego rodzica, który może być elementem div, który idealnie go otacza.
Cóż ... znalazłem kilka problemów w każdym proponowanym tutaj rozwiązaniu.
Oto moje rozwiązanie, które obejmuje jQuery .fnfunkcję instancji iexpression . Utworzyłem więcej zmiennych w mojej funkcji, niż mogłem, ale w przypadku złożonego problemu logicznego lubię podzielić ją na mniejsze, wyraźnie nazwane części.
Używam getBoundingClientRectmetody, która zwraca pozycję elementu względem widoku, więc nie muszę przejmować się pozycją przewijania
Zastosowanie :
$(".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
Źródło :
$.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);
};
Wiem, że to trochę późno, ale ta wtyczka powinna działać. 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');
}
Następnie wszystko, co musisz zrobić, to odjąć to od całkowitej wysokości dokumentu
jQuery(function () {
var documentHeight = jQuery(document).height();
var element = jQuery('#you-element');
var distanceFromBottom = documentHeight - (element.position().top + element.outerHeight(true));
alert(distanceFromBottom)
});
Możesz sprawdzić pozycję div za pomocą $(div).position()i sprawdzić, czy właściwości lewego i górnego marginesu są mniejsze niż 0:
if($(div).position().left < 0 && $(div).position().top < 0){
alert("off screen");
}