vue 停止页面滚动_Vue禁止h5页面iOS浏览器下拉bounce效果

介绍

vue-disbounce是一款基于Vue.js的自定义组件，可以有效避免触发h5页面在ios浏览器内置的下拉bounce效果。

组件

:style="{'background-color':backgroundColor }"

class="vd-wrapper"

class="vd"

ref="vd"

export default {

name: "vd",

props: {

backgroundColor: {

type: String,

default: "#ffffff"

}

data() {

return {};

mounted() {

this.vd = this.$refs["vd"];

this.vd.addEventListener("touchstart", this.touchstartEvent);

this.vd.addEventListener("touchmove", this.touchmoveEvent, {

passive: false // 阻止默认事件时，设置passive为false，提高性能

});

methods: {

getPoint(e) {

return {

x: e.touches ? e.touches[0].pageX : e.clientX,

y: e.touches ? e.touches[0].pageY : e.clientY

};

touchstartEvent(e) {

this.startPoint = this.getPoint(e);

touchmoveEvent(e) {

if (!this.startPoint) return;

const scrollTop = this.vd.scrollTop; // 距离页面顶部的距离

const curPoint = this.getPoint(e);

const moveY = curPoint.y - this.startPoint.y; // 纵向移动的距离

// 下拉

if (moveY > 0) {

// 如果在顶部，阻止浏览器默认的滚动，避免触发bounce

if (scrollTop <= 0) e.preventDefault();

// 上拉

} else {

const scrollHeight = this.vd.scrollHeight; // 全文区域的高度

const clientHeight = this.vd.clientHeight; // 可见区域的高度

const scrollBottom = scrollHeight - clientHeight - scrollTop; // 距离页面底部的距离

// 如果在底部，阻止浏览器默认的滚动，避免触发ios的bounce效果

if (scrollBottom <= 0) e.preventDefault();

}

};

.vd-wrapper {

height: 100vh;

}

.vd {

width: 100%;

height: 100%;

overflow-y: auto;

-webkit-overflow-scrolling: touch;

}

调用

为了方便调用，笔者已经上传到npm

npm安装依赖npm i vue-disbounce

安装完以后，在app.vue文件调用

import VueDisbounce from "vue-disbounce";

export default {

components: {

VueDisbounce

}

};

作者

SuperIron

vue 停止页面滚动_Vue禁止h5页面iOS浏览器下拉bounce效果相关推荐

js禁止苹果页面底部滚动_Vue.js 实现禁止 h5 页面在 ios 浏览器内置的下拉 bounce 效果...
介绍 vue-disbounce是一款基于Vue.js的自定义组件,可以有效避免触发h5页面在ios浏览器内置的下拉bounce效果. 组件 :style="{'background-col ...
html游戏禁止微信浏览器下拉,JavaScript实现禁止微信浏览器下拉回弹效果
这篇文章主要为大家详细介绍了JavaScript禁止微信浏览器下拉回弹效果的方法,具有一定的参考和学习JavaScript的价值,对JavaScript感兴趣的小伙伴们可以参考一下本篇文章本文实例为 ...
html 禁止页面回弹,JavaScript禁止微信浏览器下拉回弹效果
本文实例为大家分享了JavaScript禁止微信浏览器下拉回弹的效果,供大家参考,具体内容如下方法1: var overscroll = function(el){ el.addEventListe ...
html5 css橡皮筋效果,阻止移动端浏览器下拉橡皮筋效果（下拉滚动露底）
前言最近项目有个需求:需要移动端浏览器下的橡皮筋效果,但是页面内部的存在div框需要存在滚动.由此,遇到的问题与解决过程,记录如下. 声明:此处只讨论js控制部分,css的设置(例:overflow ...
微信 html5禁止拖拽,js实现微信禁止h5网页下拉，禁止微信内置浏览器下拉网页...
大家可能会遇到开发公众号的时候,下来会出来源地址,下面的代码可以解决禁止下拉的问题~ 禁止下拉 .scroll{ position:absolute; overflow:scroll; -webkit ...
监听页面滚动触发事件，页面停止滚动触发事件
监听页面滚动触发事件,页面停止滚动触发事件核心代码 data() {return {timer: null,isTipVisible: true} } methods: {handleScrollS ...
制作html5页面的软件,制作h5页面的软件
原标题:制作h5页面的软件制作h5页面的软件有很多,今天我们以一款非常容易上手的软件来给大家分享制作的过程. 为了展现更多的长页面设置过程,本教程中的完成效果与步骤中采用图片并不一致.您在制作自己的 ...
小程序IOS页面下拉回弹效果
小程序IOS页面下拉回弹效果小程序在ios系统上的橡皮筋回弹效果,是ios特有的,目前小程序没有特有的方法去控制.根据业务需求不想要这个回弹的效果,故此记录一下解决方案: 方案一:当页面内容比较 ...
手机页面下拉刷新效果
在做手机页面的时候我用的是MUI封装好的JavaScript. 为了实现下拉刷新的功能,大多数H5框架都是通过DIV模拟下拉回弹动画,在Android手机上,DIV动画常常会出现卡顿现象,mui通过使 ...

vue 停止页面滚动_Vue禁止h5页面iOS浏览器下拉bounce效果

vue 停止页面滚动_Vue禁止h5页面iOS浏览器下拉bounce效果相关推荐

最新文章

热门文章