Angular 8 событий прокрутки окна не запускаются в мобильных браузерах

Question

Я испробовал почти все решения, которые доступны онлайн, но ничего не получилось, ниже приведено несколько решений, которые я пробовал

Мой реальный сценарий - показать определенный элемент c div, когда другой элемент div отключается с экрана, когда экран прокручивается вниз.

Я могу сделать это на настольных компьютерах / ноутбуках, но не на мобильных устройствах, где событие прокрутки не срабатывает вообще.

мой рабочий стол / Прослушиватель событий прокрутки ноутбука / ноутбука, который я использую:

@HostListener('window:scroll', ['$event']) getScrollHeight(event) {
  console.log('from desk' , window.pageYOffset, event);
}

Хотя для прокрутки у меня не срабатывает событие прокрутки, поэтому я использовал ниже

@HostListener('window:touchStart', ['$event']) checkTouchEnd(event) {
this.start = event.changedTouches[0];
});

@HostListener('window:touchend', ['$event']) checkTouchEnd(event) {
 this.end = event.changedTouches[0];
 let scrollpositionValue;
 if((this.end.screenY - this.start.screenY) > 0) {
   console.log('scrolling up');
   console.log('[scroll-up]', this.end.screenY - this.start.screenY);
   scrollpositionValue = this.end.screenY - this.start.screenY;
  } else if(this.end.screenY - this.start.screenY < 0) {
   console.log('scrolling down');
   console.log('[scroll-down]', this.end.screenY - this.start.screenY);
   scrollpositionValue = this.end.screenY - this.start.screenY;
  }
 const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
 console.log('[scroll]', scrollPosition);    
});

Может ли кто-нибудь помочь мне с Все, что я хочу, это прокрутить позицию мобильного прокрутки в мобильном браузере.

заранее спасибо!

Answer 1

Мой реальный сценарий - показать указанный элемент c div, когда другой элемент div исчезает с экрана при прокрутке экрана.

Не использовать прокрутку для этого необходимо использовать Intersection Observer (IO) .

это было разработано для таких проблем. С помощью ввода-вывода вы можете реагировать всякий раз, когда элемент HTML пересекается с другим (или с областью просмотра)

Проверьте эту страницу , она показывает, как анимировать элемент, когда он попадает в область просмотра (прокрутите до конца)

Краткий обзор того, что вы должны сделать:

Сначала вы должны создать нового наблюдателя:

var options = {
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

Здесь мы определяем, что как только ваш целевой элемент становится видимым на 100% в области просмотра (порог 1), ваша функция обратного вызова выполняется. Здесь вы можете определить другой процент, 0,5 будет означать, что функция будет выполнена, когда ваш элемент станет видимым на 50%.

Затем вы должны определить, какие элементы следует просматривать

var target = document.querySelector('.div-to-watch');
observer.observe(target);

Наконец, вам нужно указать, что должно произойти, когда элемент будет виден в вашем окне просмотра, определив функцию обратного вызова:

var callback = function(entries, observer) { 
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // here you animate another element and do whatever you like
  });
};

Если вам требуется поддержка старых браузеров, используйте официальный полифил из w3 c.

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