$$config title: [js] 스크롤 내려서 특정 영역 감지 keywords: - IT - js $$ [참고1](https://inpa.tistory.com/entry/JS-%F0%9F%9A%80-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%82%B4%EB%A0%A4%EC%84%9C-%ED%8A%B9%EC%A0%95-%EC%98%81%EC%97%AD-%EA%B0%90%EC%A7%80%ED%95%98%EA%B8%B0) [참고2](https://blog.voidmainvoid.net/36) # 스크롤 내려서 특정 영역 감지 - 참고1 ```html

스크롤 내려서 파랑 영역이 나올때까지 내려보세요

``` ```css body, html { height: 100%; } #first { height: 400%; background: none repeat scroll 0 0 white ; text-align:center; padding-top:20px; font-size:22px; } #second { padding-top:1200px; height: 600px; background: none repeat scroll 0 0 blue; border: 5px solid black; } ``` ```js function checkVisible( element, check = 'above' ) { const viewportHeight = $(window).height(); // Viewport Height const scrolltop = $(window).scrollTop(); // Scroll Top const y = $(element).offset().top; const elementHeight = $(element).height(); // 반드시 요소가 화면에 보여야 할경우 if (check == "visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight))); // 화면에 안보여도 요소가 위에만 있으면 (페이지를 로드할때 스크롤이 밑으로 내려가 요소를 지나쳐 버릴경우) if (check == "above") return ((y < (viewportHeight + scrolltop))); } // 리소스가 로드 되면 함수 실행을 멈출지 말지 정하는 변수 let isVisible = false; // 이벤트에 등록할 함수 const func = function () { if ( !isVisible && checkVisible('#second') ) { alert("엘리먼트 보임 !!"); isVisible = true; } // 만일 리소스가 로드가 되면 더이상 이벤트 스크립트가 있을 필요가 없으니 삭제 isVisible && window.removeEventListener('scroll', func); } // 스크롤 이벤트 등록 window.addEventListener('scroll', func); ``` - 참고2 ```html

scroll down to see the div

``` ```css body, html { height: 100%; } #wrapper { height: 400%; background: none repeat scroll 0 0 #f99ccc ; text-align:center; padding-top:20px; font-size:22px; } #tester { padding-top:1200px; height: 600px; background: none repeat scroll 0 0 #fff; border: 5px solid black; } ``` ```js var isVisible = false; $(window).on('scroll',function() { if (checkVisible($('#tester'))&&!isVisible) { alert("Visible!!!"); isVisible=true; } }); function checkVisible( elm, eval ) { eval = eval || "object visible"; var viewportHeight = $(window).height(), // Viewport Height scrolltop = $(window).scrollTop(), // Scroll Top y = $(elm).offset().top, elementHeight = $(elm).height(); if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight))); if (eval == "above") return ((y < (viewportHeight + scrolltop))); } ```