스크롤 후 요소가 보이는지 확인하는 방법은 무엇입니까?
AJAX를 통해 요소를로드하고 있습니다. 일부는 페이지를 아래로 스크롤해야만 볼 수 있습니다.
페이지의 보이는 부분에 요소가 있는지 알 수있는 방법이 있습니까?
이것은 트릭을 수행해야합니다.
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
간단한 유틸리티 함수 이것은 당신이 찾고있는 요소를 받아들이고 요소가 완전히 또는 부분적으로 보이기를 원하는 경우에 유틸리티 함수를 호출 할 수있게합니다.
function Utils() {
}
Utils.prototype = {
constructor: Utils,
isElementInView: function (element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
용법
var isElementInView = Utils.isElementInView($('#flyout-left-container'), false);
if (isElementInView) {
console.log('in view');
} else {
console.log('out of view');
}
바닐라 의이 답변 :
function isScrolledIntoView(el) {
var rect = el.getBoundingClientRect();
var elemTop = rect.top;
var elemBottom = rect.bottom;
// Only completely visible elements return true:
var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
// Partially visible elements return true:
//isVisible = elemTop < window.innerHeight && elemBottom >= 0;
return isVisible;
}
지금까지 찾은 가장 좋은 방법은 jQuery appear plugin 입니다. 매력처럼 작동합니다.
요소가보기로 스크롤되거나 그렇지 않으면 사용자에게 표시 될 때 발생하는 사용자 정의 "appear"이벤트를 모방합니다.
$('#foo').appear(function() { $(this).text('Hello world'); });이 플러그인은 숨겨져 있거나 볼 수있는 영역 밖에있는 콘텐츠에 대한 불필요한 요청을 방지하는 데 사용할 수 있습니다.
스크롤 가능한 컨테이너 안에 숨겨져 있으면 작동하는 순수한 JavaScript 솔루션이 있습니다.
여기 데모 (창 크기도 조정)
var visibleY = function(el){
var rect = el.getBoundingClientRect(), top = rect.top, height = rect.height,
el = el.parentNode
// Check if bottom of the element is off the page
if (rect.bottom < 0) return false
// Check its within the document viewport
if (top > document.documentElement.clientHeight) return false
do {
rect = el.getBoundingClientRect()
if (top <= rect.bottom === false) return false
// Check if the element is out of view due to a container scrolling
if ((top + height) <= rect.top) return false
el = el.parentNode
} while (el != document.body)
return true
};
수정 2016-03-26 : 요소를지나 스크롤 할 수 있도록 솔루션을 업데이트하여 스크롤 가능 컨테이너의 맨 위에 숨겨져 있습니다. 2018-10-08 수정 : 화면 위로 스크롤 할 때 처리하도록 업데이트되었습니다.
jQuery Waypoints 플러그인은 여기에 매우 좋습니다.
$('.entry').waypoint(function() {
alert('You have scrolled to an entry.');
});
IntersectionObserver API 사용 (최신 브라우저의 기본)
관찰자 를 사용하여 요소가 viewpor 또는 스크롤 가능한 컨테이너에 표시되는지 확인하는 것이 쉽고 효율적 입니다.
scroll이벤트 를 첨부 하고 이벤트 콜백을 수동으로 확인할 필요가 없으므로 효율성이 향상됩니다.
// this is the target which is observed
var target = document.querySelector('div');
// configure the intersection observer instance
var intersectionObserverOptions = {
root: null,
rootMargin: '150px',
threshold: 1.0
}
var observer = new IntersectionObserver(onIntersection, intersectionObserverOptions);
// provide the observer with a target
observer.observe(target);
function onIntersection(entries){
entries.forEach(entry => {
console.clear();
console.log(entry.intersectionRatio)
target.classList.toggle('visible', entry.intersectionRatio > 0);
// Are we in viewport?
if (entry.intersectionRatio > 0) {
// Stop watching
// observer.unobserve(entry.target);
}
});
}.box{ width:100px; height:100px; background:red; margin:1000px; }
.box.visible{ background:green; }Scroll both Vertically & Horizontally...
<div class='box'></div>브라우저 지원 표보기 (IE / Safari에서는 지원되지 않음)
어때
function isInView(elem){
return $(elem).offset().top - $(window).scrollTop() < $(elem).height() ;
}
그런 다음 요소가 다음과 같이 표시되면 원하는 것을 트리거 할 수 있습니다.
$(window).scroll(function(){
if (isInView($('.classOfDivToCheck')))
//fire whatever you what
dothis();
})
그것은 나를 위해 잘 작동합니다.
WebResourcesDepot 은 얼마 전에 jQuery 를 사용 하는 스크롤 하는 동안로드 할 스크립트를 작성 했습니다 . 여기에서 라이브 데모를 볼 수 있습니다 . 기능의 핵심은 다음과 같습니다.
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastAddedLiveFunc();
}
});
function lastAddedLiveFunc() {
$('div#lastPostsLoader').html('<img src="images/bigLoader.gif">');
$.post("default.asp?action=getLastPosts&lastPostID="+$(".wrdLatest:last").attr("id"),
function(data){
if (data != "") {
$(".wrdLatest:last").after(data);
}
$('div#lastPostsLoader').empty();
});
};
내 요구 사항에 대한 Tweeked Scott Dowding의 멋진 기능-이것은 요소가 화면으로 방금 스크롤되었는지 즉 상단 가장자리인지 찾는 데 사용됩니다.
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}
isScrolledIntoView 는 매우 필요한 기능이므로 시도해 보았지만 뷰포트보다 높지 않은 요소에 대해 작동하지만 요소가 뷰포트보다 크면 작동하지 않습니다. 이 문제를 쉽게 해결하려면 조건을 변경하십시오.
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
이에:
return (docViewBottom >= elemTop && docViewTop <= elemBottom);
데모보기 : http://jsfiddle.net/RRSmQ/
여기에서 대부분의 답변은 요소가 전체 페이지뿐만 아니라 div의보기 밖으로 스크롤되기 때문에 숨길 수도 있다는 점을 고려하지 않습니다.
이러한 가능성을 다루기 위해 기본적으로 요소가 각 부모의 경계 내에 위치하는지 확인해야합니다.
이 솔루션은 정확히 다음을 수행합니다.
function(element, percentX, percentY){
var tolerance = 0.01; //needed because the rects returned by getBoundingClientRect provide the position up to 10 decimals
if(percentX == null){
percentX = 100;
}
if(percentY == null){
percentY = 100;
}
var elementRect = element.getBoundingClientRect();
var parentRects = [];
while(element.parentElement != null){
parentRects.push(element.parentElement.getBoundingClientRect());
element = element.parentElement;
}
var visibleInAllParents = parentRects.every(function(parentRect){
var visiblePixelX = Math.min(elementRect.right, parentRect.right) - Math.max(elementRect.left, parentRect.left);
var visiblePixelY = Math.min(elementRect.bottom, parentRect.bottom) - Math.max(elementRect.top, parentRect.top);
var visiblePercentageX = visiblePixelX / elementRect.width * 100;
var visiblePercentageY = visiblePixelY / elementRect.height * 100;
return visiblePercentageX + tolerance > percentX && visiblePercentageY + tolerance > percentY;
});
return visibleInAllParents;
};
또한 각 방향에서 표시되어야하는 백분율을 지정할 수도 있습니다.
와 같은 다른 요인으로 인해 숨겨 질 가능성은 다루지 않습니다 display: hidden.
.NET 만 사용하므로 모든 주요 브라우저에서 작동합니다 getBoundingClientRect. 개인적으로 Chrome과 Internet Explorer 11에서 테스트했습니다.
el스크롤 가능한 div ( holder) 에 요소 ( )가 표시 되는지 확인하는 일반 바닐라
function isElementVisible (el, holder) {
holder = holder || document.body
const { top, bottom, height } = el.getBoundingClientRect()
const holderRect = holder.getBoundingClientRect()
return top <= holderRect.top
? holderRect.top - top <= height
: bottom - holderRect.bottom <= height
},
jQuery를 사용한 사용법 :
var el = $('tr:last').get(0);
var holder = $('table').get(0);
isVisible = isScrolledIntoView(el, holder);
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop(),
docViewBottom = docViewTop + $(window).height(),
elemTop = $(elem).offset().top,
elemBottom = elemTop + $(elem).height();
//Is more than half of the element visible
return ((elemTop + ((elemBottom - elemTop)/2)) >= docViewTop && ((elemTop + ((elemBottom - elemTop)/2)) <= docViewBottom));
}
다음은 http://web-profile.com.ua/의 또 다른 솔루션입니다 .
<script type="text/javascript">
$.fn.is_on_screen = function(){
var win = $(window);
var viewport = {
top : win.scrollTop(),
left : win.scrollLeft()
};
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
if( $('.target').length > 0 ) { // if target element exists in DOM
if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
$('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info
} else {
$('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
}
}
$(window).scroll(function(){ // bind window scroll event
if( $('.target').length > 0 ) { // if target element exists in DOM
if( $('.target').is_on_screen() ) { // if target element is visible on screen after DOM loaded
$('.log').html('<div class="alert alert-success">target element is visible on screen</div>'); // log info
} else {
$('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
}
}
});
</script>
이는 요소에있는 패딩, 테두리 또는 여백과 뷰포트 자체보다 큰 요소를 고려합니다.
function inViewport($ele) {
var lBound = $(window).scrollTop(),
uBound = lBound + $(window).height(),
top = $ele.offset().top,
bottom = top + $ele.outerHeight(true);
return (top > lBound && top < uBound)
|| (bottom > lBound && bottom < uBound)
|| (lBound >= top && lBound <= bottom)
|| (uBound >= top && uBound <= bottom);
}
그것을 호출하려면 다음과 같이 사용하십시오.
var $myElement = $('#my-element'),
canUserSeeIt = inViewport($myElement);
console.log(canUserSeeIt); // true, if element is visible; false otherwise
새로운 "inview"이벤트를 추가하는 inview 라는 jQuery 용 플러그인 이 있습니다 .
다음은 이벤트를 사용하지 않는 jQuery 플러그인에 대한 코드입니다.
$.extend($.expr[':'],{
inView: function(a) {
var st = (document.documentElement.scrollTop || document.body.scrollTop),
ot = $(a).offset().top,
wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height();
return ot > st && ($(a).height() + ot) < (st + wh);
}
});
(function( $ ) {
$.fn.inView = function() {
var st = (document.documentElement.scrollTop || document.body.scrollTop),
ot = $(this).offset().top,
wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height();
return ot > st && ($(this).height() + ot) < (st + wh);
};
})( jQuery );
나는 James라는 녀석 의 코멘트 ( http://remysharp.com/2009/01/26/element-in-view-event-plugin/ ) 에서 이것을 발견했습니다.
스크롤 가능한 DIV 컨테이너 내부 요소의 가시성을 확인해야했습니다.
//p = DIV container scrollable
//e = element
function visible_in_container(p, e) {
var z = p.getBoundingClientRect();
var r = e.getBoundingClientRect();
// Check style visiblilty and off-limits
return e.style.opacity > 0 && e.style.display !== 'none' &&
e.style.visibility !== 'hidden' &&
!(r.top > z.bottom || r.bottom < z.top ||
r.left > z.right || r.right < z.left);
}
의 해제 구축 이 위대한 대답하면 , 당신은 그것을 더 + ES2015을 사용하여 조금 단순화 할 수 있습니다 :
function isScrolledIntoView(el) {
const { top, bottom } = el.getBoundingClientRect()
return top >= 0 && bottom <= window.innerHeight
}
창 밖으로 나가는 상단이 신경 쓰이지 않고 하단이 보이는 것만 신경 쓰면 다음과 같이 단순화 할 수 있습니다.
function isSeen(el) {
return el.getBoundingClientRect().bottom <= window.innerHeight
}
또는 한 줄짜리
const isSeen = el => el.getBoundingClientRect().bottom <= window.innerHeight
스크롤 할 때 요소가 현재 뷰포트에 있는지 확인하기 위해 jquery 플러그인 "onScreen"을 사용할 수 있습니다. 플러그인은 선택기가 화면에 나타날 때 선택기의 ": onScreen"을 true로 설정합니다. 프로젝트에 포함 할 수있는 플러그인의 링크입니다. " http://benpickles.github.io/onScreen/jquery.onscreen.min.js "
나를 위해 작동하는 아래 예제를 시도해 볼 수 있습니다.
$(document).scroll(function() {
if($("#div2").is(':onScreen')) {
console.log("Element appeared on Screen");
//do all your stuffs here when element is visible.
}
else {
console.log("Element not on Screen");
//do all your stuffs here when element is not visible.
}
});
HTML 코드 :
<div id="div1" style="width: 400px; height: 1000px; padding-top: 20px; position: relative; top: 45px"></div> <br>
<hr /> <br>
<div id="div2" style="width: 400px; height: 200px"></div>
CSS :
#div1 {
background-color: red;
}
#div2 {
background-color: green;
}
내 응용 프로그램에 이러한 방법이 있지만 jQuery를 사용하지 않습니다.
/* Get the TOP position of a given element. */
function getPositionTop(element){
var offset = 0;
while(element) {
offset += element["offsetTop"];
element = element.offsetParent;
}
return offset;
}
/* Is a given element is visible or not? */
function isElementVisible(eltId) {
var elt = document.getElementById(eltId);
if (!elt) {
// Element not found.
return false;
}
// Get the top and bottom position of the given element.
var posTop = getPositionTop(elt);
var posBottom = posTop + elt.offsetHeight;
// Get the top and bottom position of the *visible* part of the window.
var visibleTop = document.body.scrollTop;
var visibleBottom = visibleTop + document.documentElement.offsetHeight;
return ((posBottom >= visibleTop) && (posTop <= visibleBottom));
}
편집 :이 방법은 IE (최소 버전 6)에서 잘 작동합니다. FF와의 호환성에 대한 설명을 읽으십시오.
다른 div 내에서 항목을 스크롤하기 위해 이것을 조정하려면
function isScrolledIntoView (elem, divID)
{
var docViewTop = $('#' + divID).scrollTop();
var docViewBottom = docViewTop + $('#' + divID).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
요소가 표시 속성을 "none"이외의 값으로 설정하여 품질을 볼 수 있도록 허용 된 답변을 수정했습니다.
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
var elemDisplayNotNone = $(elem).css("display") !== "none";
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && elemDisplayNotNone);
}
Mootools를 사용하여 수평, 수직 또는 둘 다에서 동일한 작업을 수행하는 방법이 있습니다.
Element.implement({
inVerticalView: function (full) {
if (typeOf(full) === "null") {
full = true;
}
if (this.getStyle('display') === 'none') {
return false;
}
// Window Size and Scroll
var windowScroll = window.getScroll();
var windowSize = window.getSize();
// Element Size and Scroll
var elementPosition = this.getPosition();
var elementSize = this.getSize();
// Calculation Variables
var docViewTop = windowScroll.y;
var docViewBottom = docViewTop + windowSize.y;
var elemTop = elementPosition.y;
var elemBottom = elemTop + elementSize.y;
if (full) {
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
&& (elemBottom <= docViewBottom) && (elemTop >= docViewTop) );
} else {
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
},
inHorizontalView: function(full) {
if (typeOf(full) === "null") {
full = true;
}
if (this.getStyle('display') === 'none') {
return false;
}
// Window Size and Scroll
var windowScroll = window.getScroll();
var windowSize = window.getSize();
// Element Size and Scroll
var elementPosition = this.getPosition();
var elementSize = this.getSize();
// Calculation Variables
var docViewLeft = windowScroll.x;
var docViewRight = docViewLeft + windowSize.x;
var elemLeft = elementPosition.x;
var elemRight = elemLeft + elementSize.x;
if (full) {
return ((elemRight >= docViewLeft) && (elemLeft <= docViewRight)
&& (elemRight <= docViewRight) && (elemLeft >= docViewLeft) );
} else {
return ((elemRight <= docViewRight) && (elemLeft >= docViewLeft));
}
},
inView: function(full) {
return this.inHorizontalView(full) && this.inVerticalView(full);
}});
이 답변 을 기반으로 한 요소가 75 % 표시되는지 확인 하는 예입니다 (즉, 요소의 25 % 미만이 화면에서 벗어남).
function isScrolledIntoView(el) {
// check for 75% visible
var percentVisible = 0.75;
var elemTop = el.getBoundingClientRect().top;
var elemBottom = el.getBoundingClientRect().bottom;
var elemHeight = el.getBoundingClientRect().height;
var overhang = elemHeight * (1 - percentVisible);
var isVisible = (elemTop >= -overhang) && (elemBottom <= window.innerHeight + overhang);
return isVisible;
}
이 질문에 대한 답은 30 개가 넘으며 그중 아무도 내가 사용해온 놀랍도록 간단하고 순수한 JS 솔루션을 사용하지 않습니다. 다른 많은 사람들이 추진하고있는 것처럼이 문제를 해결하기 위해 jQuery를로드 할 필요가 없습니다.
요소가 뷰포트 내에 있는지 확인하려면 먼저 본문 내 요소 위치를 결정해야합니다. 내가 한때 생각했던 것처럼 우리는 이것을 재귀 적으로 할 필요가 없습니다. 대신 element.getBoundingClientRect().
pos = elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top;
이 값은 오브젝트 상단과 몸체 상단 사이의 Y 차이입니다.
그런 다음 요소가 뷰 내에 있는지 알려야합니다. 대부분의 구현에서는 전체 요소가 뷰포트 내에 있는지 묻기 때문에 이것이 다룰 것입니다.
먼저 창의 상단 위치는 window.scrollY.
창의 높이를 상단 위치에 추가하여 창의 하단 위치를 얻을 수 있습니다.
var window_bottom_position = window.scrollY + window.innerHeight;
요소의 최상위 위치를 가져 오는 간단한 함수를 만들 수 있습니다.
function getElementWindowTop(elem){
return elem && typeof elem.getBoundingClientRect === 'function' ? elem.getBoundingClientRect().top - document.body.getBoundingClientRect().top : 0;
}
이 함수는 창 내에서 요소의 최상위 위치를 반환하거나 메서드를 사용 0하여 요소가 아닌 다른 것을 전달 하면 반환 됩니다 .getBoundingClientRect(). 이 방법은 오랫동안 사용되어 왔으므로 브라우저에서 지원하지 않을까 걱정할 필요가 없습니다.
이제 요소의 최상위 위치는 다음과 같습니다.
var element_top_position = getElementWindowTop(element);
그리고 또는 요소의 하단 위치는 다음과 같습니다.
var element_bottom_position = element_top_position + element.clientHeight;
이제 요소의 하단 위치가 뷰포트의 상단 위치보다 낮은 지 확인하고 요소의 상단 위치가 뷰포트의 하단 위치보다 높은지 확인하여 요소가 뷰포트 내에 있는지 확인할 수 있습니다.
if(element_bottom_position >= window.scrollY
&& element_top_position <= window_bottom_position){
//element is in view
else
//element is not in view
여기에서 in-view요소에 클래스 를 추가하거나 제거하는 로직을 수행 할 수 있으며, 나중에 CSS에서 전환 효과로 처리 할 수 있습니다.
이 솔루션을 다른 곳에서 찾지 못했다는 사실에 절대적으로 놀랐습니다. 그러나 이것이 가장 깨끗하고 효과적인 솔루션이라고 믿으며 jQuery를로드 할 필요가 없습니다!
이 메서드는 요소의 일부가 페이지에 표시되는 경우 true를 반환합니다. 내 경우에는 더 잘 작동했으며 다른 사람에게 도움이 될 수 있습니다.
function isOnScreen(element) {
var elementOffsetTop = element.offset().top;
var elementHeight = element.height();
var screenScrollTop = $(window).scrollTop();
var screenHeight = $(window).height();
var scrollIsAboveElement = elementOffsetTop + elementHeight - screenScrollTop >= 0;
var elementIsVisibleOnScreen = screenScrollTop + screenHeight - elementOffsetTop >= 0;
return scrollIsAboveElement && elementIsVisibleOnScreen;
}
스크롤 가능한 div (컨테이너)에 대한 간단한 수정
var isScrolledIntoView = function(elem, container) {
var containerHeight = $(container).height();
var elemTop = $(elem).position().top;
var elemBottom = elemTop + $(elem).height();
return (elemBottom > 0 && elemTop < containerHeight);
}
참고 : 요소가 스크롤 가능한 div보다 크면 작동하지 않습니다.
이 짧은 jQuery 함수 확장을 수정했는데, 자유롭게 사용할 수 있습니다 (MIT 라이센스).
/**
* returns true if an element is visible, with decent performance
* @param [scope] scope of the render-window instance; default: window
* @returns {boolean}
*/
jQuery.fn.isOnScreen = function(scope){
var element = this;
if(!element){
return;
}
var target = $(element);
if(target.is(':visible') == false){
return false;
}
scope = $(scope || window);
var top = scope.scrollTop();
var bot = top + scope.height();
var elTop = target.offset().top;
var elBot = elTop + target.height();
return ((elBot <= bot) && (elTop >= top));
};
많은 수의 요소를 매우 빠르게 처리하도록 설계된 작업에 대한 구성 요소 를 작성 했습니다 ( 느린 모바일에서 1000 요소 에 대해 <10ms 조정 ).
창, HTML 요소, 내장은 iframe, 양산 자식 창 - - 그것은 모든 사용자가 액세스 할 수있는 스크롤 컨테이너의 종류와 함께 작동하고 (감지 것에 매우 유연 전체 또는 부분 가시성 , 경계 상자 또는 컨텐츠 상자 , 사용자 정의 공차 영역 , 등 ).
대부분 자동 생성되는 거대한 테스트 스위트는 광고 된 크로스 브라우저 로 작동하는지 확인 합니다 .
이 마음에 그것에게 총을 보내기 jQuery.isInView를 . 그렇지 않으면 소스 코드에서 영감을 얻을 수 있습니다 (예 : 여기) .
요소가 곧 보일지 확인하는 방법을 찾고 있었으므로 위의 스 니펫을 확장하여 작업을 수행했습니다. 누군가에게 도움이 될 경우를 대비하여 여기에 남겨 둘 것이라고 생각했습니다.
elm = 확인하려는 요소가 뷰에 있습니다.
scrollElement = 스크롤이있는 창 또는 부모 요소를 전달할 수 있습니다.
offset = 요소가 화면에서 200px 떨어져있을 때 실행되도록하려면 200을 전달합니다.
function isScrolledIntoView(elem, scrollElement, offset)
{
var $elem = $(elem);
var $window = $(scrollElement);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return (((elemBottom+offset) >= docViewBottom) && ((elemTop-offset) <= docViewTop)) || (((elemBottom-offset) <= docViewBottom) && ((elemTop+offset) >= docViewTop));
}참고 URL : https://stackoverflow.com/questions/487073/how-to-check-if-element-is-visible-after-scrolling
'development' 카테고리의 다른 글
| 서블릿은 어떻게 작동합니까? (0) | 2020.09.27 |
|---|---|
| 문자열에서 공백을 어떻게 제거합니까? (0) | 2020.09.27 |
| Twitter Bootstrap 3을 사용하여 열 중앙에 배치 (0) | 2020.09.27 |
| MySQL 쿼리 결과를 CSV 형식으로 출력하는 방법은 무엇입니까? (0) | 2020.09.27 |
| visible : hidden과 display : none의 차이점은 무엇입니까? (0) | 2020.09.27 |