요소가 화면에 표시 확인
가능성이있는
jQuery- 스크롤링 후 요소가 보이는지 확인
요소가 화면에 표시되어야합니다. offsetTop을 사용하여 요소의 수직 위치를 사용하고 반환 된 값이 입고되었습니다. 이 경우 아래로 스크롤하지 않는 문서 요소가 표시되지 않습니다. 그러나 이것에도 불구하고 offsetTop은 내 화면 높이가 703 일 때 618 값을 반환해야 offsetTop에 따라 요소가 표시되어야합니다.
내가 사용하는 코드는 다음과 가변적입니다.
function posY(obj)
{
var curtop = 0;
if( obj.offsetParent )
{
while(1)
{
curtop += obj.offsetTop;
if( !obj.offsetParent )
{
break;
}
obj = obj.offsetParent;
}
} else if( obj.y )
{
curtop += obj.y;
}
return curtop;
}
미리 감사드립니다!
BenM은 상단 위치와 일치를 위해 뷰포트의 높이 스크롤 위치를 감지해야합니다. 사용하는 기능은 괜찮고 작업을 수행하지만 조금 더 복잡합니다.
사용하지 확장은 다음과 가변 jQuery
합니다.
function posY(elm) {
var test = elm, top = 0;
while(!!test && test.tagName.toLowerCase() !== "body") {
top += test.offsetTop;
test = test.offsetParent;
}
return top;
}
function viewPortHeight() {
var de = document.documentElement;
if(!!window.innerWidth)
{ return window.innerHeight; }
else if( de && !isNaN(de.clientHeight) )
{ return de.clientHeight; }
return 0;
}
function scrollY() {
if( window.pageYOffset ) { return window.pageYOffset; }
return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
}
function checkvisible( elm ) {
var vpH = viewPortHeight(), // Viewport Height
st = scrollY(), // Scroll Top
y = posY(elm);
return (y > (vpH + st));
}
jQuery를 사용하는 것이 자신의 능력을 갖추고 있습니다.
function checkVisible( elm, evalType ) {
evalType = evalType || "visible";
var vpH = $(window).height(), // Viewport Height
st = $(window).scrollTop(), // Scroll Top
y = $(elm).offset().top,
elementHeight = $(elm).height();
if (evalType === "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
if (evalType === "above") return ((y < (vpH + st)));
}
이것은 두 번째 회차 변수를 제공합니다. "visible"(또는 두 번째 언급 된 변수 없음)을 사용하여 요소가 화면에 엄격하게 확인합니다. "above"로 설정하면 해당 요소가 화면 위 또는 위에있을 때 true를 반환합니다.
실제보기 : http://jsfiddle.net/RJX5N/2/
질문에 대한 답변이 됐습니다.
-개선 된 버전-
이만큼 더 짧게 마셔야합니다.
function checkVisible(elm) {
var rect = elm.getBoundingClientRect();
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}
그것을 증명하기 위해 바이올린으로 : http://jsfiddle.net/t2L274ty/1/
그리고와 버전 threshold
과 포함 mode
:
function checkVisible(elm, threshold, mode) {
threshold = threshold || 0;
mode = mode || 'visible';
var rect = elm.getBoundingClientRect();
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
var above = rect.bottom - threshold < 0;
var below = rect.top - viewHeight + threshold >= 0;
return mode === 'above' ? above : (mode === 'below' ? below : !above && !below);
}
그리고 그것을 증명하기 위해 바이올린으로 : http://jsfiddle.net/t2L274ty/2/
브라우저 간 호환이 가능합니다. jQuery를 사용할 수 있습니까?
function isOnScreen(element)
{
var curPos = element.offset();
var curTop = curPos.top;
var screenHeight = $(window).height();
return (curTop > screenHeight) ? false : true;
}
그런 다음 다음과 같이 함수를 호출합니다.
if(isOnScreen($('#myDivId'))) { /* Code here... */ };
참고 URL : https://stackoverflow.com/questions/5353934/check-if-element-is-visible-on-screen
'ProgramingTip' 카테고리의 다른 글
콘솔 (Ctrl-C)에서 종료 될 때 PyQt 애플리케이션을 종료하는 올바른 방법은 무엇입니까? (0) | 2020.11.21 |
---|---|
입력 유형 = "텍스트"요소 HTML / CSS 내부 텍스트 기 (0) | 2020.11.21 |
Postgres에서 CSV 파일의 값으로 선택한 행을 업데이트하는 방법은 무엇입니까? (0) | 2020.11.20 |
어떤 Ruby on Rails가 어떤 Ruby 버전과 호환 되나요? (0) | 2020.11.20 |
엔터티 필드에 대한 Nullable 속성, Code First를 포함하는 Entity Framework (0) | 2020.11.20 |