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 开发工具收集
Apr 17 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
html5应用缓存_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
HTML5制作表格样式
Nov 15 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 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通过串口实现发送短信
2015/07/08 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
降低PHP Redis内存占用
2017/03/23 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
jquery中常用的SET和GET
2009/01/13 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
2018/03/28 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
浅谈Python中copy()方法的使用
2015/05/21 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
个人生活学习自我评价范文
2013/11/26 职场文书
日语专业毕业生求职信
2013/12/04 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
建设工程授权委托书
2014/09/22 职场文书
学校重阳节活动总结
2015/03/24 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
施工安全责任协议书
2016/03/23 职场文书
Python开发五子棋小游戏
2022/04/28 Python