요소가 화면 밖에 있는지 확인하는 방법

Question 1

DIV 요소가 화면에서 떨어지지 않는지 jQuery로 확인해야합니다. 요소는 CSS 속성에 따라 표시되고 표시되지만 다음과 같은 방법으로 의도적으로 화면 외부에 배치 될 수 있습니다.

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

:visible요소의 높이와 너비가 0이 아니므로 jQuery 선택기를 사용할 수 없습니다 .

나는 멋진 일을하지 않습니다. 이 절대 위치 배치는 내 Ajax 프레임 워크가 일부 위젯의 숨기기 / 표시를 구현하는 방식 입니다.

Question 2

"오프 스크린"의 정의에 따라 다릅니다. 뷰포트 내에 있습니까, 아니면 페이지의 정의 된 경계 내에 있습니까?

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

Question 3

여기 에는 브라우저의 스크롤 위치를 고려하여 요소가 브라우저의 보이는 뷰포트 내에 있는지 여부를 테스트 할 수 있는 jQuery 플러그인 이 있습니다.

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

부분 가시성을 확인할 수도 있습니다.

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

한 가지 단점은 믹스에 수평 위치를 추가하는 것이 충분히 쉬울지라도 수직 위치 / 스크롤링에서만 작동한다는 것입니다.

Question 4

뷰 포트 외부인지 확인하기 위해 플러그인이 필요하지 않습니다.

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

Question 5

음 ... 여기에서 제안 된 모든 솔루션에서 몇 가지 문제를 발견했습니다.

전체 요소 를 화면에 표시할지 아니면 일부만 표시 할지 선택할 수 있어야 합니다.
제안 된 솔루션은 요소가 윈도우보다 넓은 / 높은 경우 실패 하고 좀 커버 브라우저 창을.

다음은 jQuery .fn인스턴스 함수 및 expression. 나는 내 함수 안에 내가 할 수있는 것보다 더 많은 변수를 만들었지 만 복잡한 논리적 문제의 경우 더 작고 명확하게 명명 된 조각으로 나누는 것을 좋아합니다.

getBoundingClientRect뷰포트에 상대적으로 요소 위치를 반환 하는 메서드를 사용 하고 있으므로 스크롤 위치에 대해 신경 쓸 필요가 없습니다.

사용법 :

$(".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);
};

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

Question 7

주어진 요소의 상단에서 거리 가져 오기
주어진 동일한 요소의 높이를 추가하십시오. 이것은 화면 상단에서 주어진 요소의 끝까지의 총 수를 알려줍니다.

그런 다음 전체 문서 높이에서 빼기 만하면됩니다.

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

Question 8

을 사용하여 div의 위치를 $(div).position()확인하고 left 및 top margin 속성이 0 미만인지 확인할 수 있습니다.

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