반응형
스크롤 후 요소가 표시되는지 확인하는 방법
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;
}
업데이트: IntersectionObserver 사용
지금까지 발견된 방법 중 가장 좋은 것은 jQuery appear 플러그인입니다.마법처럼 작동한다.
요소가 보기로 스크롤되거나 사용자에게 표시될 때 발생하는 사용자 지정 "보기" 이벤트를 모방합니다.
$('#foo').appear(function() { $(this).text('Hello world'); });이 플러그인은 숨김 또는 보기 가능한 영역 밖에 있는 컨텐츠에 대한 불필요한 요청을 방지하는 데 사용할 수 있습니다.
인터섹션 옵서버 API 사용
(현대 브라우저에 추가)
옵서버를 사용하면 요소가 뷰포트 또는 스크롤 가능한 컨테이너에 표시되는지 여부를 쉽고 효율적으로 판단할 수 있습니다.
scroll이벤트 및 이벤트콜백에 대한 수동 체크가 배제되어 보다 효율적입니다.
// define an observer instance
var observer = new IntersectionObserver(onIntersection, {
root: null, // default is the viewport
threshold: .5 // percentage of taregt's visible area. Triggers "onIntersection"
})
// callback is called on intersection change
function onIntersection(entries, opts){
entries.forEach(entry =>
entry.target.classList.toggle('visible', entry.isIntersecting)
)
}
// Use the observer to observe an element
observer.observe( document.querySelector('.box') )
// To stop observing:
// observer.unobserve(entry.target)span{ position:fixed; top:0; left:0; }
.box{ width:100px; height:100px; background:red; margin:1000px; transition:.75s; }
.box.visible{ background:green; border-radius:50%; }<span>Scroll both Vertically & Horizontally...</span>
<div class='box'></div>모바일 브라우저를 포함한 최신 브라우저에서 지원됩니다.IE에서 지원되지 않음 - 브라우저 지원 테이블 보기
스크롤 가능한 컨테이너 안에 숨겨져 있는 경우에도 작동하는 순수 자바스크립트 솔루션입니다.
여기서 데모(창 크기 조정도 시도)
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 편집: 화면 위에서 화면을 스크롤하면 처리하도록 업데이트되었습니다.
「 」 「 」 「 」 「 」 「 。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);
var isVisible = isScrolledIntoView(el, holder);
jQuery Waypoints 플러그인은 여기에 매우 적합합니다.
$('.entry').waypoint(function() {
alert('You have scrolled to an entry.');
});
플러그인 사이트에는 몇 가지 예가 있습니다.
어때.
function isInView(elem){
return $(elem).offset().top - $(window).scrollTop() < $(elem).height() ;
}
그런 다음 요소가 이렇게 표시되면 원하는 대로 트리거할 수 있습니다.
$(window).scroll(function(){
if (isInView($('.classOfDivToCheck')))
//fire whatever you what
dothis();
})
난 괜찮아
트윅 Scott Dowding의 쿨한 기능 - 이 기능은 요소가 화면 안으로 스크롤되었는지(즉, 상단 모서리) 확인하는 데 사용됩니다.
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}
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();
});
};
대부분의 답변은 요소가 페이지 전체뿐만 아니라 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.
이 기능은 모든 주요 브라우저에서 사용할 수 있습니다.사용하는 것은 이뿐이기 때문입니다.Chrome과 Internet Explorer 11에서 직접 테스트했습니다.
스크롤IntoView는 매우 필요한 기능이기 때문에 사용해 보았습니다만, 뷰포트보다 크지 않은 요소에서는 동작합니다만, 뷰포트와 같이 요소가 크면 동작하지 않습니다.이를 수정하려면 상태를 쉽게 변경하십시오.
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
다음과 같이 입력합니다.
return (docViewBottom >= elemTop && docViewTop <= elemBottom);
데모를 참조해 주세요.http://jsfiddle.net/RRSmQ/
여기에는 뷰포트 자체보다 큰 요소뿐만 아니라 요소에 있는 모든 패딩, 테두리 또는 여백이 고려됩니다.
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
다음은 또 다른 해결 방법입니다.
<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).on('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>
JSFiddle에서 확인
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));
}
스크롤 가능한 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
새로운 "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 );
여기(http://remysharp.com/2009/01/26/element-in-view-event-plugin/)에서 제임스라는 사람이 쓴 댓글에서 이걸 찾았어요.
이를 위해 찾은 가장 쉬운 솔루션은 Intersection Observer API입니다.
var observer = new IntersectionObserver(function(entries) {
if(entries[0].isIntersecting === true)
console.log('Element has just become visible in screen');
}, { threshold: [0] });
observer.observe(document.querySelector("#main-container"));
응용 프로그램에 이러한 메서드가 있지만 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));
}
[Edit] : 이 메서드는 I.E(최소 버전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));
}
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;
}
이 답변에 근거한 예에서는 요소가 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;
}
/**
* Is element within visible region of a scrollable container
* @param {HTMLElement} el - element to test
* @returns {boolean} true if within visible region, otherwise false
*/
function isScrolledIntoView(el) {
var rect = el.getBoundingClientRect();
return (rect.top >= 0) && (rect.bottom <= window.innerHeight);
}
Javascript 코드는 다음과 같이 쓸 수 있습니다.
window.addEventListener('scroll', function() {
var element = document.querySelector('#main-container');
var position = element.getBoundingClientRect();
// checking whether fully visible
if(position.top >= 0 && position.bottom <= window.innerHeight) {
console.log('Element is fully visible in screen');
}
// checking for partial visibility
if(position.top < window.innerHeight && position.bottom >= 0) {
console.log('Element is partially visible in screen');
}
});반응 js에는 다음과 같이 기술되어 있습니다.
componentDidMount() {
window.addEventListener('scroll', this.isScrolledIntoView);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.isScrolledIntoView);
}
isScrolledIntoView() {
var element = document.querySelector('.element');
var position = element.getBoundingClientRect();
// checking whether fully visible
if (position.top >= 0 && position.bottom <= window.innerHeight) {
console.log('Element is fully visible in screen');
}
// checking for partial visibility
if (position.top < window.innerHeight && position.bottom >= 0) {
console.log('Element is partially visible in screen');
}
}요소의 표시 속성이 "없음" 이외의 품질로 설정되도록 승인된 답변을 수정했습니다.
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);
}});
이 메서드는 페이지에 요소의 일부가 표시되는 경우 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;
}
jQuery expr을 사용하는 것이 좋습니다.
jQuery.extend(jQuery.expr[':'], {
inview: function (elem) {
var t = $(elem);
var offset = t.offset();
var win = $(window);
var winST = win.scrollTop();
var elHeight = t.outerHeight(true);
if ( offset.top > winST - elHeight && offset.top < winST + elHeight + win.height()) {
return true;
}
return false;
}
});
이 방법으로 사용할 수 있습니다.
$(".my-elem:inview"); //returns only element that is in view
$(".my-elem").is(":inview"); //check if element is in view
$(".my-elem:inview").length; //check how many elements are in view
는 쉽게 수 요.scroll사용자가 보기를 스크롤할 때마다 확인하는 이벤트 기능 등입니다.
이 질문에는 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를 로드할 필요가 없습니다.
언급URL : https://stackoverflow.com/questions/487073/how-to-check-if-element-is-visible-after-scrolling
반응형
'programing' 카테고리의 다른 글
| 어레이를 병합하고 키를 유지하는 방법 (0) | 2022.11.22 |
|---|---|
| jQuery는 요소와 관련된 모든 CSS 스타일을 가져올 수 있습니까? (0) | 2022.11.22 |
| JavaScript에서 페이지가 새로고침 또는 새로고침되는지 확인합니다. (0) | 2022.11.22 |
| Java에서의 MySQL 데이터 시간 및 타임스탬프 처리 (0) | 2022.11.22 |
| MySQL의 테이블 필드에 인덱스가 있는지 확인하는 방법 (0) | 2022.11.22 |