화면 (뷰포트)에서 일정 비율의 요소가 보이는지 확인하십시오.

Question

일부 요소가 보이는지 어떻게 알 수 있습니까? 더 나은 이미지를 보시려면 아래 이미지를보십시오. 이미지가 반 볼 때

나는 이벤트를 해고하고자합니다. 모든 브라우저 및 기기 (태블릿 및 스마트 폰)에서 작동한다면 좋을 것입니다.

Answer 1

Jquery.fracs 플러그인은 사용자가 필요로하는 것만 큼 정확하게하는 것처럼 보입니다.

function callback(fracs: Fractions, previousFracs: Fractions) { 
    if(fracs > 0.5) 
     doSomething(); 
}; 

var fracs = $("img").fracs(callback); 

Answer 2

당신의 창은 그 사이에 떨어질

$(element).offset().top 

하면

$(document).scrollTop() + $(window).height() 

$(document).scrollTop() 

사이

, 그것은 볼 수 있어야합니다.

편집 : 귀하의 요소 (가시성이 결정될 것임)가 절대적으로 위치한다고 가정합니다. 그렇지 않다면 조금 더 복잡 할 것입니다.

EDIT2 : 이것은 수직 오프셋의 경우에만 가시성을 결정하기위한 것입니다. 수평 버전의 경우 "scrollTop"을 "scrollLeft", "height"를 "width"및 "top"을 "left"로 바꿉니다.

Answer 3

특별히이 목적으로 작성된 jQuery fracs 플러그인이 있습니다.

Answer 4

var $w = $(window), wh = $w.height(), 
    top = $w.scrollTop(), bottom = top + wh, 
    $img = $("#image"), 
    imgCenter = $img.offset().top + $img.height()/2; 
if (imgCenter >= top && imgCenter < bottom) { 
    // the image is half-visible 
} 

Answer 5

항목을 화면 하단 또는 상단에서 볼 수 있는지 확인하고 싶습니다. 그래서 로직이 될 것이다 :

on window scroll event 
if item.y is less than scroll.y, calculate amount off screen 
if item.y + item.height is greater than scroll.y + scroll.height, calculate amount off screen 
deduct both values off the item.height to find the total off screen 
create a percentage of this 

그래서

자바 스크립트는이 같은 일 것입니다 : 내가 이전 브라우저에 대한 지원을 제외 한

var el = document.getElementById('item1'), 
    rect = el.getBoundingClientRect(), 
    item = { 
     el: el, 
     x: rect.left, 
     y: rect.top, 
     w: el.offsetWidth, 
     h: el.offsetHeight 
    }; 

window.addEventListener('scroll', function (e) { 
    var deduct = 0, 
     percentage = 0, 
     x = window.pageXOffset, 
     y = window.pageYOffset, 
     w = window.innerWidth, 
     h = window.innerHeight; 
    if (item.y < y) { 
     deduct += (y - item.y); 
    } 
    if ((item.y + item.h) > (y + h)) { 
     deduct += (item.y + item.h) - (y + h); 
    } 
    if (deduct > item.h) { 
     deduct = item.h; 
    } 
    percentage = Math.round(((item.h - deduct)/item.h) * 100); 
}); 

,하지만 당신이 그것을 필요로하는 경우가 될 것이다 :

x = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft, 
y = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop, 
w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, 
h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;