Проверить прокрутку, чтобы закончить

Question

У меня есть элемент, который можно прокручивать. У меня также есть функция, которая прокручивает до определенной позиции. Я хотел бы вызвать функцию, когда scrollTo закончен.

Пример Plunker

var x = document.querySelector('.container');
$scope.scrollTo = function() {
  x.scrollTo({
    top: 300 ,
    behavior: 'smooth'
  });
};

 // do something when scrollTo is finished

javascript angularjs

4

Peter Boomsma 20 Авг 2018 в 11:58

Answer 1

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

function isScrollToFinished() {
        const checkIfScrollToIsFinished = setInterval(() => {
            if (positionOfItem === scrollContainer.scrollTop) {
                // do something
                clearInterval(checkIfScrollToIsFinished);
            }
        }, 25);
}

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

1

Peter Boomsma 21 Авг 2018 в 09:03

Answer 2

Я использую решение, подобное этому:

function scrollElementTo(el, position) {
  return new Promise((resolve) => {
    const scrollListener = (evt) => {
      if (typeof evt === 'undefined') {
        return;
      }

      const target = evt.currentTarget;

      if (target.scrollTop === position) {
        target.removeEventListener('scroll', scrollListener);
        resolve();
      }
    };

    el.addEventListener('scroll', scrollListener);

    // scroll to desired position (NB: this implementation works for
    // vertical scroll, but can easily be adjusted to horizontal 
    // scroll as well)
    el.scrollTo(0, position);
  });
}

const scrollContainer = document.querySelector('#theScrollContainer');

// desired y coords for scroll
const yDesiredScroll = 234;

scrollElementTo(scrollContainer, yDesiredScroll).then(() => {
    // do something here
});

0

DoiDor 7 Май 2019 в 07:28

Answer 3

Функция window.scrollTo() не имеет функции обратного вызова при завершении. Вместо этого вы можете использовать функцию jquery.scrollTo. Пример поста: scrollTo с замедлением и функцией обратного вызова.

0

barbsan 7 Май 2019 в 09:46

Проверить прокрутку, чтобы закончить

3 ответа

Похожие вопросы

Новые вопросы

javascript