스크롤 가능한 영역 내에서 div의 보이는 높이를 검색해야합니다. 나는 jQuery에 대해 꽤 괜찮다고 생각하지만 이것은 나를 완전히 버리고 있습니다.
검은 색 래퍼 안에 빨간색 div가 있다고 가정 해 보겠습니다.
위의 그래픽에서 jQuery 함수는 div의 보이는 부분 인 248을 반환합니다.
위의 그래픽에서와 같이 사용자가 div의 맨 위로 스크롤하면 296이보고됩니다.
이제 사용자가 div를지나 스크롤하면 다시 248을보고합니다.
분명히 내 수치는이 데모 에서처럼 일관되고 명확하지 않을 것입니다. 아니면 그 수치에 대해 하드 코딩 할 것입니다.
나는 약간의 이론이 있습니다.
- 창 높이 가져 오기
- div의 높이 가져 오기
- 창 상단에서 div의 초기 오프셋 가져 오기
- 사용자가 스크롤 할 때 오프셋을 가져옵니다.
- 오프셋이 양수이면 div의 상단이 여전히 표시됨을 의미합니다.
- 음수이면 div의 상단이 창에 가려진 것입니다. 이 시점에서 div는 창의 전체 높이를 차지하거나 div의 하단에 표시 될 수 있습니다.
- div의 하단이 표시되면 창 하단과의 간격을 파악합니다.
매우 간단 해 보이지만 머리를 감쌀 수는 없습니다. 나는 내일 아침에 또 다른 균열을 가질 것입니다. 천재 여러분 중 일부가 도움을 줄 수 있다고 생각했습니다.
감사!
업데이트 : 나는 이것을 스스로 알아 냈지만 아래 답변 중 하나가 더 우아해 보이기 때문에 대신 사용할 것입니다. 궁금한 사람을 위해 여기에 내가 생각해 낸 것이 있습니다.
$(document).ready(function() {
var windowHeight = $(window).height();
var overviewHeight = $("#overview").height();
var overviewStaticTop = $("#overview").offset().top;
var overviewScrollTop = overviewStaticTop - $(window).scrollTop();
var overviewStaticBottom = overviewStaticTop + $("#overview").height();
var overviewScrollBottom = windowHeight - (overviewStaticBottom - $(window).scrollTop());
var visibleArea;
if ((overviewHeight + overviewScrollTop) < windowHeight) {
// alert("bottom is showing!");
visibleArea = windowHeight - overviewScrollBottom;
// alert(visibleArea);
} else {
if (overviewScrollTop < 0) {
// alert("is full height");
visibleArea = windowHeight;
// alert(visibleArea);
} else {
// alert("top is showing");
visibleArea = windowHeight - overviewScrollTop;
// alert(visibleArea);
}
}
});
답변
여기에 빠르고 더러운 개념이 있습니다. 기본적으로 offset().top
요소의를 창의 상단과 창의 offset().top + height()
하단과 비교합니다.
function getVisible() {
var $el = $('#foo'),
scrollTop = $(this).scrollTop(),
scrollBot = scrollTop + $(this).height(),
elTop = $el.offset().top,
elBottom = elTop + $el.outerHeight(),
visibleTop = elTop < scrollTop ? scrollTop : elTop,
visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
$('#notification').text(visibleBottom - visibleTop);
}
$(window).on('scroll resize', getVisible);
edit- 창의 크기를 조정할 때 로직을 수행하기위한 작은 업데이트입니다.
답변
요소 (높이)가 뷰포트에있는 픽셀의 양을 계산합니다.
이 작은 함수 는 px
(수직) 뷰포트에 보이는 요소 의 양을 반환합니다 .
function inViewport($el) {
var elH = $el.outerHeight(),
H = $(window).height(),
r = $el[0].getBoundingClientRect(), t=r.top, b=r.bottom;
return Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H));
}
다음과 같이 사용하십시오.
$(window).on("scroll resize", function(){
console.log( inViewport($('#elementID')) ); // n px in viewport
});
그게 다야.
jQuery .inViewport()
플러그인
위에서 로직을 추출 하고 다음과 같은 플러그인을 만들 수 있습니다 .
/**
* inViewport jQuery plugin by Roko C.B.
* http://stackoverflow.com/a/26831113/383904
* Returns a callback function with an argument holding
* the current amount of px an element is visible in viewport
* (The min returned value is 0 (element outside of viewport)
*/
;(function($, win) {
$.fn.inViewport = function(cb) {
return this.each(function(i,el) {
function visPx(){
var elH = $(el).outerHeight(),
H = $(win).height(),
r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
return cb.call(el, Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H)));
}
visPx();
$(win).on("resize scroll", visPx);
});
};
}(jQuery, window));
다음과 같이 사용하십시오.
$("selector").inViewport(function(px) {
console.log( px ); // `px` represents the amount of visible height
if(px > 0) {
// do this if element enters the viewport // px > 0
}else{
// do that if element exits the viewport // px = 0
}
}); // Here you can chain other jQuery methods to your selector
당신의 선택기는 동적으로 창을들을 것입니다 scroll
및 resize
뿐만 아니라 DOM 준비 트로프의 첫 번째 콜백 함수 인수를 초기 값을 반환합니다 px
.
답변
다음은 jQuery 플러그인으로 작동하도록 작성된 것을 제외하고 위의 Rory 접근 방식의 버전입니다. 해당 형식에서보다 일반적인 적용 가능성이있을 수 있습니다. 좋은 대답, Rory-감사합니다!
$.fn.visibleHeight = function() {
var elBottom, elTop, scrollBot, scrollTop, visibleBottom, visibleTop;
scrollTop = $(window).scrollTop();
scrollBot = scrollTop + $(window).height();
elTop = this.offset().top;
elBottom = elTop + this.outerHeight();
visibleTop = elTop < scrollTop ? scrollTop : elTop;
visibleBottom = elBottom > scrollBot ? scrollBot : elBottom;
return visibleBottom - visibleTop
}
다음과 같이 호출 할 수 있습니다.
$("#myDiv").visibleHeight();