javascript - JavaScript - 在移动设备上禁用页面刷新

Question

我正在尝试通过触摸滚动事件在移动设备上禁用页面刷新。在网上搜索，我发现了以下方法：

/*
w = flag determining if pageYOffset was 0 before trying scroll below it
h = last pageYOffset
*/
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 DOM element just to show the current pageYOffset - for test     
        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);
}

该页面只有 testLabel DIV 和 document.body.style.height="60000px" 用于测试。

问题：

• 测试 pageYOffset 的值 当页面没有被缩放时，pageYOffset 根据页面获取滚动值。
• 当页面缩放时测试 pageYOffset 的值，该值保持 0 直到当前我不知道如何检测的某个滚动点。
• 删除document.body.style.height="60000px"使正文不可滚动的行，然后，在缩放时，滚动页面不会更新 pageYOffset 的值。

笔记：

1. 在安卓浏览器上测试
2. 使用纯JS，无框架。
3. 测试在 touchstart 上 - 所以我在最后一次滚动后得到 pageYOffset 值。

问题总结

1. 当页面被缩放时，touchmove 事件没有触发，除非我从初始的 innerHeight 开始“真正的”滚动（也许在缩放之前）。
2. 页面刷新问题还没有解决

pageYOffset （或替代方式）的任何解决方案都可以帮助解决页面刷新问题。任何替代方案都可以真正提供帮助，尽管我想知道为什么 touchmove 事件没有触发，尽管页面被“滚动”（虽然缩放）。

标签： javascriptscroll

Answer 1

body {               
  overscroll-behavior: contain;
}