오브젝트가 스크린 영역 안에 반 이상 나타났는지 체크하는 스크립트 입니다. > 그누보드5 팁자료실

그누보드5 팁자료실

오브젝트가 스크린 영역 안에 반 이상 나타났는지 체크하는 스크립트 입니다. 정보

오브젝트가 스크린 영역 안에 반 이상 나타났는지 체크하는 스크립트 입니다.

본문

해당 오브젝트가 화면 영역 안에 반 이상 들어왔는지 체크하는 자바스크립트 함수입니다.

스크롤 처리할때 사용하려고 했는데 이거 생각하는 시간이 아깝고.. 플러그인 사용하자니 귀찮아서 적었습니다.

제이쿼리 없이 사용하시려면 제이쿼리 셀렉터 부분만 변경하시면 될 것 같고, 아니면 return만 참조하시면 될 것 같아요.
 
더 좋은 수식이나 방법이 있겠지만.. 혹시나 유용하실 분들이 있을 것 같아서 올려봅니다.


function isEntered(o)
{
var h = $(window).outerHeight();  //화면 높이

var top = $('html,body').scrollTop(); //화면 상단 스크롤 위치
var bot = top + h; //화면 하단 스크롤 위치

var oTop = o.offset().top; //오브젝트 상단 스크롤 위치
var oBot = oTop + o.outerHeight(); //오브젝트 하단 스크롤 위치

                return (top < oTop ? (oTop <= bot && (oBot - bot) < (bot - oTop)) : ((oBot >= top) && ((oTop - top) < (oBot - top))));
}


아래와 같이 사용하시면 되겠습니다.

$(window).scroll(function(){

$(".has_anim").not(".animated").each(function(){
        if(isEntered($(this)))
        {
              //화면에 나타났을때 액션
        }
    });
});
추천
0

댓글 1개

전체 2,428 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT