javascript 禁止刷新 h5禁止刷新

转载

落笔成诗 2023-06-06 11:21:43

文章标签 H5 移动端 Math 上下滚动 文章分类 JavaScript 前端开发

关键字：移动端，无下拉，可滚动页面

在做移动端的H5页面时，由于手机自有的特性，整个页面具有下拉刷新功能。但如果我们仅仅是做展示页面，不希望下拉刷新，但同时也想保留整个页面的正常上下滚动，该如何做呢？

实现要点

禁用body上的touchmove事件
设置恰当的元素布局
使用matrix实现页面正常上下滚动
给body元素设置高度

禁用body上的touchmove事件

document.body.addEventListener('touchmove', (e) => {
  e.preventDefault();
}, { passive: false });

设置恰当的元素布局

html

<header>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
</header>
<body>
  <div id="container">
    <div id="content">
    </div>
  </div>
</body>

css

#container {
    height: 100%; // 在移动端，高度需要从当前环境中获取，100%无效
    overflow: hidden;
    position: absolute;
    touch-action: none;    
}

#content {
    position: absolute;
}

使用matrix实现页面正常上下滚动

let contentTop = 0; // 记录要滚动元素的top值，默认情况为0，因为默认显示时，内容的头部时紧挨着容器的
    const getTouchObj = (event) => ((touches) => ('0' in touches ? touches[0] : null))(event.targetTouches || event.originalEvent.targetTouches);
    const windowHeight = getWindowHeight() * 0.8 * 0.786; // 滚动元素的可显示部分的高度，这个值通常都比滚动部分的高度小，不然就不需要滚动显示了。
    const getPos = (touchObj) => ({ x: touchObj.pageX, y: touchObj.pageY, time: new Date() });
    const getOffsetY = (start, endPos) => endPos.y - start;

    const getScrollEl = () => $('#content'); // 滚动元素

    const getContentHeight = () => getScrollEl().height(); // 滚动元素的高度

    const getRealOffset = (offset, top) => {
      if (offset > 0) { // 处理下滑
        if (offset + top <= 0) return offset; // 下滑的距离没有超出顶部
        return -top; // 下滑的距离超出了顶部
      }
      if (offset < 0) { // 处理上滑
        if (Math.abs(offset) + Math.abs(top) + windowHeight <= getContentHeight()) return offset; // 上滑的距离没有超出底部
        return -(getContentHeight() - Math.abs(top) - windowHeight); // 上滑的距离超出了底部
      }
      return 0;
    };
    let startY = 0;

    getScrollEl().on('touchstart', (e) => { // 监听记录滑动的开始Y坐标
      startY = getPos(getTouchObj(e)).y;
    });

    getScrollEl().on('touchmove', (e1) => {
      ((offsetY) => {
        const offset = getRealOffset(offsetY, contentTop); 
        //        this.setState({ offset });
        if (Math.abs(offset) > 1) {
          contentTop += offset;
          getScrollEl().css('transform', `matrix(1, 0, 0, 1, 0, ${contentTop})`);
          //          console.log('real offset', offset, 'new top', contentTop);
        }
      })(getOffsetY(startY, getPos(getTouchObj(e1))));
      startY = getPos(getTouchObj(e1)).y; // 更新当前的滑动Y坐标
    });