I have been attempting to prevent page refresh on a mobile device through touch scroll events. After researching online, I came across the following method:
/*
w = flag indicating if pageYOffset was 0 before attempting to scroll below it
h = last pageYOffset value
*/
function disablePageRefreshFacility() {
let w,h=0;
document.addEventListener('touchstart',function(e) {
if(e.touches.length!=1) return;
h=e.touches[0].clientY; w=window.pageYOffset===0;
// testLabel is a DOM element used to display the current pageYOffset - for testing purposes
testLabel.innerHTML=window.pageYOffset;
},false);
document.addEventListener('touchmove',function(e) {
let y=e.touches[0].clientY,d=y-h; h=y;
if(w) { w=0; if(d>0) return e.preventDefault(); }
if(window.pageYOffset===0&&d>0) return e.preventDefault();
},false);
}
The page only contains a testLabel DIV and sets the
document.body.style.height="60000px"The problem at hand:
- When the page is NOT zoomed, the pageYOffset provides the correct scrolling value according to the page.
- However, when the page IS zoomed, the value remains at 0 until a certain scroll point which is currently difficult to detect.
- If the
line is removed, making the body unscrollable, scrolling the page while zoomed does not update the pageYOffset value.document.body.style.height="60000px"
Additional information:
- Tested on an Android browser.
- Pure JavaScript is utilized with no framework involved.
- The test is performed on touchstart - therefore, the pageYOffset value is obtained after the last scroll event.
Summary of Issues
- The touchmove event does not trigger when the page is zoomed, unless the initial innerHeight boundary is exceeded (before zoom).
- The issue of page refresh prevention has not yet been resolved.
A solution related to pageYOffset (or an alternative approach) would greatly assist in tackling the page refresh problem. Any alternate solutions are welcome, as I am puzzled why the touchmove event fails to trigger despite the page being "scrolled" (even while zoomed).