.scrolledOver()

scrolledOver(element, [, heightOffset])

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

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

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

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

<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('Элемент ушёл, уже вне поля зрения.')
  }
});

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