Angular 8 window scroll events not firing on mobile browsers

Question

I have tried almost every solution that is available online but nothing worked out, below are few solutions I tried

My actual scenario is to show a specific div element when the other div element goes off from the screen when the screen is scrolled down.

I'm able to do this on desktops/laptops but not on mobiles where the scroll event doesn't fire at all.

my Desktop / Laptop scroll event listener I'm using is

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

While for the mobile as my scroll event doesn't fire so I used below

@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);    
});

Can somebody help me with a solution, All I want is to get the scrollY position on a mobile browser scrolled.

thanks in advance!

Answer 1

My actual scenario is to show a specific div element when the other div element goes off from the screen when the screen is scrolled down.

Don't use scroll event listener for this, use Intersection Observer (IO) for this.

this was designed for such problems. With IO you can react whenever an HTML element intersects with another one (or with the viewport)

Check this page, it shows you how to animate an element once it comes into viewport (scroll all the way down)

Short recap on what you have to do:

First you have to create a new observer:

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

var observer = new IntersectionObserver(callback, options);

Here we define that once your target Element is 100% visible in the viewport (threshold of 1) your callback Function is getting executed. Here you can define another percentage, 0.5 would mean that the function would be executed once your element is 50% visible.

Then you have to define which elements to watch

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

Last you need to specify what should happen once the element is visible in your viewport by defining the callback function:

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
  });
};

If you need to support older browsers, use the official polyfill from w3c.

If you don't want to trigger the animation again when the elements are scrolled again into view a second time then you can also unobserve an element once it's animated.