微信浏览器禁止页面下拉查看网址_h5页面禁用微信浏览器下拉-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43498860/article/details/146400789

微信中打开H5页面，禁止下拉出现黑块，但是又不能影响页面中的内容点击或者滚动

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

/**
 * 防止滚动穿透的函数
 * @param {HTMLElement} el - 需要防止滚动穿透的元素
 */
var overscroll = function (el) {
    // 监听 touchstart 事件
    el.addEventListener('touchstart', function () {
        var top = el.scrollTop; // 当前滚动位置
        var totalScroll = el.scrollHeight; // 可滚动内容的总高度
        var currentScroll = top + el.offsetHeight; // 当前滚动位置加上容器高度

        // 如果滚动到顶部或底部，调整滚动位置以防止滚动穿透
        if (top === 0) {
            el.scrollTop = 1; // 向下滚动1像素
        } else if (currentScroll === totalScroll) {
            el.scrollTop = top - 1; // 向上滚动1像素
        }
    });

    // 监听 touchmove 事件
    el.addEventListener('touchmove', function (evt) {
        // 如果内容可以滚动（即内容高度大于容器高度），标记事件
        if (el.offsetHeight < el.scrollHeight) {
            evt._isScroller = true;
        }
    });
};

// 对指定的元素应用 overscroll 函数
overscroll(document.querySelector('#app'));

// 监听 body 的 touchmove 事件
document.body.addEventListener('touchmove', function (evt) {
    // 如果事件没有被标记为可滚动，阻止默认行为以防止滚动穿透
    if (!evt._isScroller) {
        evt.preventDefault();
    }
});