HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码


Posted in HTML / CSS onApril 10, 2020

H5手指下滑弹出负一屏, 阻止移动端浏览器内置下拉刷新功能,具体实例代码如下所示:

<template>
  <div class="outer-scroll">
    <div class="loading top-box">
        默认隐藏,负一屏,手指下滑即可弹出显示,上滑隐藏
    </div>

    <div class="scroll-box">
        <h1>正式内容</h1>
    </div>
  </div>
</template>
<script>
import $ from 'jquery';
export default {
  name: 'About',
  data() {
      return {

      }
  },
  methods: {
    homescroll() {
      let scroll = document.querySelector('.scroll-box');
      let outer_scroll = document.querySelector('.outer-scroll');
      let topbox = document.querySelector('.top-box');
      let topboxHeight;
      let touchStart;
      let touchDis;
      // 注意如果绑定触摸时的事件则会在下拉时从手指的下拉位置开始下拉 该事件在手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
      scroll.ontouchstart = function (event) {
        touchStart = 0;
        touchDis = 0;
        // 说明:由于手指头是多点触摸到屏幕上的我们所以e.originalEvent.targetTouches的
        // 意思是一个手指触碰点集合我们只需要获取第一个点就可以了所以
        touchStart = event.targetTouches[0].pageY;
        console.log(touchStart);
      };
      // 当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
      scroll.ontouchmove = (event) => {
        // 从顶部向下拖拽
        let touchPos = event.targetTouches[0].pageY;
        touchDis = touchPos - touchStart;
        if (!topboxHeight) {
          topboxHeight = topbox.offsetHeight;
        }
        console.log(topboxHeight);
        if (document.documentElement.scrollTop == 0 && touchDis >= 100) {
          topbox.style.display = 'block';
          $(scroll).stop().animate({ top: topboxHeight }, 'fast');
        } else if (topbox.style.display == 'block' && touchDis < -10) {
          console.log(touchDis);
          $(scroll).stop().animate({ top: '0' }, 'fast');
          setTimeout(() => { topbox.style.display = 'none'; this.$forceUpdate(); }, 100);
          event.preventDefault();
        }
      };
    }
  },
  mounted() {
    document.addEventListener('touchMove', e => {
      e.preventDefault();
    })
    this.homescroll();
  }
}
</script>

<style scoped>

.scroll-box {
  width: 100%;
  position: absolute;
  top: 0;
  background-color: #fff;
}
.loading {
  background: gray;
  width: 100vw;
  height: 40vh;
  display: none;
  overflow: hidden;
  font-size: 40px;
}
.scroll-box {
  background: #ccc;
  height: 60vh;
  color: #fff;
}
</style>

在PC上用鼠标下拉可以弹出负一屏,但是在移动端手指下拉会变为刷新,无法弹出负一屏,解决办法

<!-- 给 body 加样式 overflow:hidden -->
<body style="overflow:hidden">

    <!-- TODO: -->

</body>

实际操作效果如下:

HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码

总结

到此这篇关于HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码的文章就介绍到这了,更多相关html5手指下滑弹出内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 #HTML / CSS
用canvas显示验证码的实现
Apr 10 #HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
Apr 08 #HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 #HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 #HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 #HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 #HTML / CSS
You might like
PHP的FTP学习(四)
2006/10/09 PHP
PHP网站基础优化方法小结
2008/09/29 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
php中session定期自动清理的方法
2015/11/12 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
js获取网页高度(详细整理)
2012/12/28 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
js单词形式的运算符
2014/05/06 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
Python中input和raw_input的一点区别
2014/10/21 Python
EM算法的python实现的方法步骤
2018/01/02 Python
学习python分支结构
2019/05/17 Python
Python实现ATM系统
2020/02/17 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
2014/05/07 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
致全体运动员广播稿
2014/02/01 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA