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教程(9):设置RGB颜色
Apr 02 HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
使用css3实现超炫的loading加载动画效果
May 07 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
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上传、管理照片示例
2006/10/09 PHP
需要发散思维学习PHP
2009/06/29 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
jquery实现抽奖功能
2020/10/22 jQuery
python实现划词翻译
2020/04/23 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
python视频按帧截取图片工具
2019/07/23 Python
django框架ModelForm组件用法详解
2019/12/11 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
班级学习计划书
2014/04/27 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
公司外出活动方案
2014/08/14 职场文书
公司给客户的感谢信
2015/01/23 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
2015年教师节感言
2015/08/03 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书