HTML5手指下滑彈出負一屏阻止移動端瀏覽器內置下拉刷新功能的實現代碼
發(fā)布時間：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;
// 注意如果綁定觸摸時的事件則會在下拉時從手指的下拉位置開始下拉 該事件在手指觸摸屏幕時候觸發(fā)，即使已經有一個手指放在屏幕上也會觸發(fā)。
scroll.ontouchstart = function (event) {
touchStart = 0;
touchDis = 0;
// 說明：由于手指頭是多點觸摸到屏幕上的我們所以e.originalEvent.targetTouches的
// 意思是一個手指觸碰點集合我們只需要獲取第一個點就可以了所以
touchStart = event.targetTouches[0].pageY;
console.log(touchStart);
};
// 當手指在屏幕上滑動的時候連續(xù)地觸發(fā)。在這個事件發(fā)生期間，調用preventDefault()事件可以阻止?jié)L動。
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上用鼠標下拉可以彈出負一屏，但是在移動端手指下拉會變?yōu)樗⑿拢瑹o法彈出負一屏，解決辦法：
<!-- 給 body 加樣式 overflow:hidden -->
<body style="overflow:hidden">
<!-- TODO: -->
</body>
實際操作效果如下：
總結
到此這篇關于HTML5手指下滑彈出負一屏阻止移動端瀏覽器內置下拉刷新功能的實現代碼的文章就介紹到這了,更多相關html5手指下滑彈出內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
本文介紹HTML5實現移動端購物車自動結算,通過WebStorage、事件監(jiān)聽、DOM操作等技術,確保實時更新與數據同步,優(yōu)化性能及無障礙性,提升用戶體驗，感興趣的朋友一起看看吧2025-06-18- 在HTML5中，<button>標簽用于定義一個可點擊的按鈕，它是創(chuàng)建交互式網頁的重要元素之一，本文將深入解析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的搜索框是一個強大的工具，能夠有效提升用戶體驗,通過結合自動補全功能和適當的樣式，可以創(chuàng)建出既美觀又實用的搜索界面,這篇文章給大家介紹HTML5 搜索框Search Box2025-06-13
- Checkbox是HTML5中非常重要的表單元素之一，通過合理使用其屬性和樣式自定義方法，可以為用戶提供豐富多樣的交互體驗，這篇文章給大家介紹HTML5中Checkbox標簽的深入全面解2025-06-13
- 本實例展示了一種基于HTML5技術的圖片上傳功能，無需外部插件即可通過拖放圖片實現上傳,涉及到HTML5的拖放API和File API，以及使用CSS來增強用戶界面的交互性和視覺反饋，2025-05-16
- 在HTML5和CSS中，定位(positioning)是控制元素在頁面上位置的重要機制,主要有四種定位方式：靜態(tài)定位(static)、相對定位(relative)、絕對定位(absolute)和固定定位(fixed),2025-05-13
- Microdata作為HTML5新增的一個特性，它允許開發(fā)者在HTML文檔中添加更多的語義信息，以便于搜索引擎和瀏覽器更好地理解頁面內容，本文將探討HTML5中Microdata的使用方法以及2025-04-21
在HTML語法中，表格主要通過< table >、< tr >和< td >3個標簽構成,本文通過實例代碼講解HTML5表格語法格式，感興趣的朋友一起看看吧2025-04-21
