in view

in-view.js?

Получайте уведомления, когда элемент DOM входит или выходит из области просмотра. Небольшая (~1,9 КБ в сжатом виде), независимая утилита javascript для IE9+.

camwiegert.github.io/in-view

---

Установка

Либо загрузите последнюю версию и включите ее в свою разметку, либо установите с помощью npm:

npm install --save in-view

---

Основное использование

С помощью 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(<событие>, <обработчик>)

Зарегистрируйте обработчик для элементов, выбранных selector для event . Единственные события, которые выдаются в поле зрения, — это 'enter' и 'exit' .

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

inView(<селектор>).once(<событие>, <обработчик>)

Зарегистрируйте обработчик для элементов, выбранных selector для event . Обработчики, зарегистрированные 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(<тест>)

Переопределить критерии видимости In-View по умолчанию с помощью пользовательской функции. Эта функция получит элемент и объект параметров в качестве единственных двух аргументов. Возвращайте true если элемент следует считать видимым, и false в противном случае.

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

inView(<селектор>).check()

Вручную проверьте статус элементов, выбранных selector . По умолчанию все реестры проверяются при событиях scroll , resize и load window .

 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 регистрирует только один регулируемый (максимум раз в 100 мс) прослушиватель событий для каждого события load , resize и scroll window и использует их для запуска проверки каждого реестра.

Использование IntersectionObserver

Появился новый API браузера IntersectionObserver , целью которого является предоставление разработчикам эффективного способа проверки видимости элементов DOM. В дальнейшем in-view будет стремиться делегировать полномочия IntersectionObserver , когда он будет поддерживаться, возвращаясь к опросу только при необходимости.

---

Лицензия МТИ