HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
发布时间：2020-04-10 17:31:30 作者：8个小问题 
我要评论
我要评论这篇文章主要介绍了HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
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实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用户体验，感兴趣的朋友一起看看吧2025-06-18- 在HTML5中，<button>标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一，本文将深入解析HTML5中的<button>标签，详细介绍其属性、样式以及实际2025-06-18
基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)
本文将深入剖析一段基于 HTML5 Canvas 的代码，该代码实现了图片的旋转（90 度和 180 度）以及旋转后图片的下载功能,通过对代码的解读，我们可以学习到如何利用 Canvas API2025-06-18
HTML5 getUserMedia API网页录音实现指南示例小结
本教程将指导你如何利用这一API，结合Web Audio API，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步详解,此外，还讨论了getUserMedia API的使用限制和最2025-06-16- HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5 搜索框Search Box2025-06-13
- Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中Checkbox标签的深入全面解2025-06-13
- 本实例展示了一种基于HTML5技术的图片上传功能，无需外部插件即可通过拖放图片实现上传,涉及到HTML5的拖放API和File API，以及使用CSS来增强用户界面的交互性和视觉反馈，2025-05-16
- 在HTML5和CSS中，定位(positioning)是控制元素在页面上位置的重要机制,主要有四种定位方式：静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed),2025-05-13
- Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探讨HTML5中Microdata的使用方法以及2025-04-21
在HTML语法中，表格主要通过< table >、< tr >和< td >3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧2025-04-21
最新评论