.scrolledOver()

Прокрутка

Проверить, насколько прокручен элемент в данный момент. Возврат процентного значения того, как элемент в настоящее время позиционируется по сравнению с окном просмотра.

scrolledOver(element, [, heightOffset])

Метод .scrolledOver() может быть полезен при работе с «прокруткой». Данный метод возвращает процентные значения того, как элемент в настоящее время позиционируется по сравнению с окном просмотра.

Пример: если элемент находится в самом верху вашего текущего окна просмотра, эта функция вернет значение 0. Как только элемент покидает область просмотра, функция возвращает значение 1. Если элемент «прокручивается» ровно на половину его высоты, функция возвращает значение 0.5. Следующий параметр может быть передан функции.

Параметр Тип Описание
element Node Элемент HTML
heightOffset Number Смещение

Примеры использования

Текущая прокрутка

<div class="uk-height-viewport"></div>
<div id="example" class="uk-card uk-card-primary uk-card-body"></div>
<div id="scrollHere" class="uk-height-viewport"></div>
const myElement = util.$('#example');

UIkit.scroll(myElement).scrollTo(util.$('#scrollHere'));

function checkScrolledOver() {
  console.log(util.scrolledOver(myElement));
}

checkScrolledOver();

util.on(window, 'scroll', function() {
  checkScrolledOver();
});

Результат

0
0.020378457059679767
0.11208151382823872
...
0.9898107714701602
0.9985443959243085
1

Проверка видимости

Результат данного примера будет возвращать сообщение о том, что элемент ещё не прокручивался до тех пор, пока он не пройдёт верхнюю отметку и не исчезнет с поля зрения. Далее появится сообщение о том, что элемент "ушёл". Когда элемент снова окажется ниже, то сообщение вновь об этом сообщит.

<div id="example-card" class="uk-card uk-card-default uk-card-body"></div>
const myCardElem = util.$('#example-card');

// Проверяем, прошли ли мимо элемента
util.on(window, 'scroll', function () {
  if (util.scrolledOver(myCardElem) < 1) {
    console.log('Элемент еще "прокручен" не был, он где-то ниже.')
  } else {
    console.log('Элемент ушёл, уже вне поля зрения.')
  }
});

Результат

'Элемент еще "прокручен" не был, он где-то ниже.'