How To Avoid Direct To Another Anchor When Scroll Mobile Device Screen And Touch It To Make It Stop?

I have a problem when developing hybird mobile app. I want to know how to avoid redirect to another anchor when scroll mobile device screen and touch it to make it stop? For exam

Solution 1:

Here's one solution regardless of the underlying browser: add a transparent element that covers the whole container when scrolling, rendering none of the anchors clickable, and hide it in 500ms after the scrolling stops.

const mask = document.getElementById('mask');
mask.style.visibility = 'hidden';

constshowMask = () => {
 if (mask.style.visibility === 'hidden')
   mask.style.visibility = 'visible';
}

consthideMask = () => {
  if (mask.style.visibility === 'visible')
   mask.style.visibility = 'hidden';
}
const debounced = _.debounce(hideMask, 1000);
window.addEventListener('scroll', e => {
 showMask();
 debounced();
});

https://jsfiddle.net/8bz7dd7p/1/

Note that I add a color in the mask for illustration, also, the function to hide the mask should be debounced.