in view

in-view.js ?

DOM 요소가 뷰포트에 들어오거나 나갈 때 알림을 받습니다. IE9+용 작은(~1.9kb gzip) 종속성 없는 자바스크립트 유틸리티입니다.

camwiegert.github.io/in-view

---

설치

최신 릴리스를 다운로드하여 마크업에 포함하거나 npm을 사용하여 설치하십시오.

npm install --save in-view

---

기본 사용법

인뷰를 사용하면 요소가 뷰포트에 들어 오거나 나갈 때 호출되는 핸들러를 등록할 수 있습니다. 각 핸들러는 하나의 요소(뷰포트에 들어가거나 나가는 요소)를 유일한 인수로 받습니다.

 inView ( '.someSelector' )
    . on ( 'enter' , doSomething )
    . on ( 'exit' , el => {
        el . style . opacity = 0.5 ;
    } ) ; 

---

API

in-view는 inView(<selector>) 로 캡처된 각 요소 세트에 대해 별도의 핸들러 레지스트리를 유지 관리합니다. 각 레지스트리는 동일한 네 가지 메서드를 노출합니다. in-view는 네 가지 최상위 메서드도 노출합니다. ( is , offset , threshold , test ).

inView(<선택기>).on(<이벤트>, <핸들러>)

event selector 로 선택된 요소에 대한 핸들러를 등록합니다. In-view에서 발생하는 유일한 이벤트는 'enter' 및 'exit' 입니다.

 inView ( '.someSelector' ) . on ( 'enter' , doSomething ) ;

inView(<선택기>).once(<이벤트>, <핸들러>)

event selector 로 선택된 요소에 대한 핸들러를 등록합니다. once 으로 등록된 핸들러는 한 번만 호출됩니다.

 inView ( '.someSelector' ) . once ( 'enter' , doSomething ) ;

inView.is(<요소>)

element 뷰포트에 있는지 확인하세요.

 inView . is ( document . querySelector ( '.someSelector' ) ) ;
// => true

inView.offset(<오프셋>)

기본적으로 In-View는 뷰포트의 가장자리가 깨지는 경우 뷰포트에 있는 항목을 고려합니다. 이는 해당 가장자리로부터 오프셋을 설정하는 데 사용할 수 있습니다. 예를 들어 오프셋이 100 이면 요소가 뷰포트의 가장자리를 100 픽셀 이상 깨뜨리는 경우 뷰포트의 요소로 간주됩니다. offset 양수 또는 음수일 수 있습니다.

 inView . offset ( 100 ) ;
inView . offset ( - 50 ) ;

개체를 전달하여 방향별로 오프셋을 설정할 수도 있습니다.

 inView . offset ( {
    top : 100 ,
    right : 75 ,
    bottom : 50 ,
    left : 25
} ) ;

inView.threshold(<임계값>)

뷰포트에서 고려되기 위해 표시되어야 하는 요소의 높이 와 너비의 비율을 설정합니다. 기본값은 0 으로, 임의의 금액을 의미합니다. 임계값이 0.5 또는 1 이면 요소의 높이와 너비가 각각 절반 또는 전부 표시되어야 합니다. threshold 0 과 1 사이의 숫자여야 합니다.

 inView . threshold ( 0 ) ;
inView . threshold ( 0.5 ) ;
inView . threshold ( 1 ) ;

inView.test(<테스트>)

사용자 정의 기능으로 뷰 내 기본 가시성 기준을 재정의합니다. 이 함수는 요소와 옵션 개체를 두 개의 인수로만 받습니다. 요소가 보이는 것으로 간주되어야 하면 true 반환하고, 그렇지 않으면 false 를 반환합니다.

 inView . test ( ( el , options ) => {
    // ...
} ) ;

inView(<선택기>).check()

selector 로 선택된 요소의 상태를 수동으로 확인합니다. 기본적으로 모든 레지스트리는 window scroll , resize 및 load 이벤트에서 확인됩니다.

 inView ( '.someSelector' ) . check ( ) ;

inView(<선택기>).emit(<이벤트>, <요소>)

단일 요소에 대한 event 수동으로 내보냅니다.

 inView ( '.someSelector' ) . emit ( 'exit' , document . querySelectorAll ( '.someSelector' ) [ 0 ] ) ; 

---

브라우저 지원

in-view는 모든 최신 브라우저와 IE9+를 지원합니다.

작은 주의사항으로 in-view에서는 MutationObserver를 활용하여 DOM 변형 후 등록된 요소의 가시성을 확인합니다. 이것이 IE9-10에 필요한 기능이라면 폴리필 사용을 고려해 보세요.

---

성능

스크롤 이벤트를 감시하는 라이브러리는 페이지 성능을 저하시킬 위험이 있습니다. 이를 완화하기 위해 현재 In-View는 각 window load , resize 및 scroll 이벤트에 대해 단일 조절(최대 100ms에 한 번) 이벤트 리스너만 등록하고 이를 사용하여 각 레지스트리에서 검사를 실행합니다.

IntersectionObserver 활용

개발자에게 DOM 요소의 가시성을 확인할 수 있는 효과적인 방법을 제공하는 것을 목표로 하는 새로운 브라우저 API인 IntersectionObserver 가 있습니다. 앞으로 In-View는 지원되는 경우 IntersectionObserver 에 위임하고 필요한 경우에만 폴링으로 돌아가는 것을 목표로 할 것입니다.

---

MIT 라이센스