Как подавить генерацию события 'scroll' при использовании 'scrollIntoView'?

Question

[Tyusha]

Перехватываю событие scroll:

window.addEventListener( 'scroll', myScroll );

Обрабатываю его по-своему и внутри использую 'scrollIntoView'

function myScroll() {
   ....
  someElement.scrollIntoView();
   ....
}

Однако выполнение метода 'scrollIntoView' само по себе инициирует новое событие 'scroll', что приводит к повторному вызову 'myScroll', и так далее по кругу.

Можно как-то подавить такой зацикленный вызов скролла? Понимаю, что можно на время выполнения 'myScroll' отписываться от события 'scroll', а после завершения моей пользовательской анимации снова подписываться на него. Но как-то это неправильно.

Comments

[imko]

Переопределение скролла в принципе плохая идея

[Tyusha]

Да, знаю. Так себе событие, плохо предсказуемое.

Answer 1

[UntitledNikname]

В jQuery есть функционал чтобы проверить тип скрола.

$('#scroller').scroll(function(e) {
    if ($(this).is(':animated')) {
        console.log('scroll happen by animate');
    } else if (e.originalEvent) {
        // scroll happen manual scroll
        console.log('scroll happen manual scroll');
    } else {
        // scroll happen by call
        console.log('scroll happen by call');
    }
});

Можно вызвать анимированый scrollIntoView и игнорировать повторное событие вызванное самим вызовом функции

Comments

[Tyusha]

Спасибо. Но jQuery не использую. Можно конечно покопаться в самом jQ, посмотреть, как это там сделано.

Answer 2

[Сергей Соколов]

пара идей, не проверял:

1. держать переменную-флаг, которую выключать на время, при запуске scrollIntoView():

let isScrollIgnored = false;

const myScroll = () => {
  if (isScrollIgnored) return;
  // ...
  isScrollIgnored = true;
  setTimeout(() => isScrollIgnored = false, 500);
  someElement.scrollIntoView();
  // ...
};

window.addEventListener( 'scroll', myScroll );

2. [upd.: нерабочий вариант] проверять свойство isTrusted у события scroll: может, когда оно вызвано не мышкой, а scrollIntoView(), то становится false? Тогда:

const myScroll = event => {
  const { isTrusted } = event;
  if (!isTrusted) return;
  // ...

Comments

[Tyusha]

Спасибо.

[Сергей Соколов]

Tyusha, проверил 2-й вариант: облом — при скролле, вызваном scrollIntoView() событие scroll происходит тоже с isTrusted: true.