jQuery를

Question

에서이 기능을 사용하는 방법을

내가 가지고있는 경우 페이지 뷰에 요소가 첫번째 스크롤 감지하도록되어 다음과 같은 jQuery를 기능 :

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)); 
} 

내 마음은 개 썰매 오늘은 ... 내가 어떻게 할 수있는 이 기능을 사용합니까?

$('.guardrail360')이 표시 될 때를 감지하려고한다고 가정합니다.

Answer 1

이 보인다 : 문 요소가보기에 스크롤을 처음 실행하는 경우뿐만 아니라, 순서를 만들기 위해, 당신이 run_once 기능을 생성 그 사건이 발생합니다.

$(window).scroll(function() { 
    isScrolledIntoView('.guardrail360'); 
}); 

Answer 2

if (isScrolledIntoView('.guardrail360')) { 

} 

다른 답변에서 제안한대로 $(window).scroll()에 행동을 사용해야합니다. 당신이 스크롤 이벤트를 바인드해야하고 검출 할 때를하는 것처럼

$('window').on('scroll', function() { 

    if (isScrolledIntoView('.guardrail360')) run_once(function() { 
      // ... 
    }); 

}); 

function run_once(callback) { 

    var done = false; 

    return function() { 

     if (!done) { 

      done = true; 

      return callback.apply(this, arguments); 

     } 

    }; 

} 

Answer 3

몇 가지 방법이 있습니다. 사용자 경험 및/또는 성능에 관심이있는 경우 단순한 window.scroll 구현을 사용하지 마십시오.

처리기를 윈도우 스크롤 이벤트에 첨부하는 것은 매우 바람직하지 않습니다. 브라우저에 따라 스크롤 이벤트가 많이 발생하고 스크롤 콜백에 코드를 삽입하면 페이지를 스크롤하려는 시도가 느려집니다 (좋지 않음). 결과적으로 스크롤 핸들러의 성능 저하는 전반적으로 스크롤하는 의 성능을 합성합니다. 대신 어떤 형태의 타이머를 사용하여 모든 X 밀리 초를 확인하거나 스크롤 이벤트를 첨부하고 은 지연 후 (또는 지정된 수의 실행 - 지연 후)에만 코드를 실행하는 것이 훨씬 좋습니다.

ejohn.org

방법 1에 존 Resig 씨, jQuery를의 제작자 :

var $el = $('.guardrail360'); 

var timer = setInterval(function() { 
    if (isScrolledIntoView($el)) { 
     // do stuff 

     // to run this block only once, simply uncomment the next line: 
     //clearInterval(timer); 
    } 
}, 150); 

방법 2 : 창

우선하여 setInterval은 타이머를 이용하여 순진한 접근 방식이있다. 스크롤 이벤트

그렇다면 사소한 문제가 있습니다. 아직은 이 비효율적입니다. way (브라우저에 따라 초당 수백 번 스크롤 이벤트가 발생하므로 브라우저 리플 로우/다시 그리기를 트리거하는 코드가 아닌 여기에서 많은 코드를 실행하고 싶지는 않습니다).

페이지 스크롤 다운이 느리고 번거롭던 사이트를 방문한 적이 있습니까?

var $el = $('.guardrail360'); 

$(window).on('scroll', function() { 
    if (isScrolledIntoView($el)) { 
     // do stuff 
    } 
}); 

방법 3 : 그것은 종종 바로 여기에 이와 같은 코드의 조각에 의해 발생하는 aforementioned blog post에 존 레식에 의해 제안 된 두 세계

높은 트래픽 사이트의 멋진 하이브리드 접근 방식, 최고의 :

var $el = $('.guardrail360'), 
    didScroll = false; 

$(window).scroll(function() { 
    didScroll = true; 
}); 

var timer = setInterval(function() { 
    if (didScroll) { 
     didScroll = false; 
     if (isScrolledIntoView($el)) { 
      // do stuff 

      // to run this block only once, simply uncomment the next line: 
      //clearInterval(timer); 
     } 
    } 
}, 250); 

방법 4 :

스로틀 (호출 간의 최소 N 밀리 초) 바운싱 스로틀/또는 디 바운싱 (하나만 invocatio n per burst) 패턴을 사용하여 내부 코드가 실행되는 속도를 효율적으로 제한 할 수도 있습니다. 당신이 Ben Alman's jQuery throttle/debounce plugin를 사용하는 거라고 가정하면, 코드는 다음과 같습니다

var $el = $('.guardrail360'); 

// Throttling 
$(window).on('scroll', $.throttle(250, function(){ 
    if (isScrolledIntoView($el)) { 
     // do stuff 
    } 
})); 

// Debouncing 
$(window).on('scroll', $.debounce(250, function(){ 
    if (isScrolledIntoView($el)) { 
     // do stuff 
    } 
})); 

(즉 디 바운싱이 다른 구현에서 약간 다르게 작동합니다,하지만 때로는 당신이 당신의 사용자 경험 시나리오에 따라, 원하는 것을 할 수 있습니다)