Vue项目移动端滚动穿透问题
概述
今天在做 Vue 移动端项目的时候遇到了滚动穿透问题,在网上查资料后,选取了我觉得最好的方法,记录下来供以后开发时参考,相信对其他人也有用。
上层无需滚动
如果上层无需滚动的话,直接屏蔽上层的 touchmove 事件即可。示例如下:
<div @touchmove.prevent>
我是里面的内容
</div>
上层需要滚动
如果上层需要滚动的话,那么固定的时候先获取 body 的滑动距离,然后用 fixed 固定,用 top 模拟滚动距离;不固定的时候用获取 top 的值,然后让 body 滚动到之前的地方即可。示例如下:
<template>
<div @click="handleHambergerClick"></div>
</template>
<script>
export default {
name: 'BaseHeaderMobile',
data() {
return {
isHeaderVisible: false,
};
},
methods: {
handleHambergerClick() {
// hack: 滑动穿透问题
if (!this.isHeaderVisible) {
this.lockBody();
} else {
this.resetBody();
}
this.isHeaderVisible = !this.isHeaderVisible;
},
lockBody() {
const { body } = document;
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
body.style.position = 'fixed';
body.style.width = '100%';
body.style.top = `-${scrollTop}px`;
},
resetBody() {
const { body } = document;
const { top } = body.style;
body.style.position = '';
body.style.width = '';
body.style.top = '';
document.body.scrollTop = -parseInt(top, 10);
document.documentElement.scrollTop = -parseInt(top, 10);
},
},
};
</script>
Vue项目移动端滚动穿透问题的更多相关文章
- 【JS】341- 移动端滚动穿透的6种解决方案
前言 相信能看到这篇文章的你,已经是遇到了这个问题.我就不gif展示问题效果了. 鉴于此问题是面试的常客,故特地针对滚动穿透这个疑难杂症,整理了六个解决方案. 各方法操作难易不同,分别针对弹层和bod ...
- vue项目更改端口号
vue项目的默认端口为8080,有时候处于某些原因会造成端口号的冲突,因此需要我们适当的更改其端口号来解决问题,将上图中的port更改为合适的端口号就可以,但是需要注意的是浏览器的安全限制端口号详情见 ...
- 基于vue-cli的vue项目移动端样式适配,lib-flexible和postcss-px2rem
安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --save ...
- 基于vue-cli3的vue项目移动端样式适配,lib-flexible和postcss-px2rem
1,安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --sa ...
- vue项目上滑滚动加载更多&下拉刷新
上滑滚动时获取内容高度.屏幕高度和滚动高度(此处#sslist要为内容是id) 内容高度 let innerHeight = document.querySelector("#sslist ...
- vue中移动端滚动事件,点击一次触发了事件两次(better-scroll)
解决办法一: 将button标签换成a标签 问题代码: <span class="submitBtn" @click.stop="replyReport()&quo ...
- 基于animate.css动画库的全屏滚动小插件,适用于vue.js(移动端、pc)项目
功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...
- 弹层蒙版(mask),ios滚动穿透,我们项目的解决方案
问题描述 项目开发遇到一个ios独有的问题,在wkwebview中稳定复现 问题: 弹出一个蒙版,当在蒙版上面滑动的时候蒙版后面的内容滚动了 这当然是ios的bug,但是经过我们测试iphone7也会 ...
- Vue项目用于Ios和Android端开发
起因 前公司商城App项目使用的是H5开发,有微信公众号.Ios和Android三个版本,H5版本是自己写的一套框架,已经用了有些年头了,承载不下不断涌现出的新需求.而Ios和Android端通过we ...
随机推荐
- PHP之面试题总结
总结一些面试题,有备无患,走起... 1.熟悉的 nosql 和 sql 有什么区别(优势,劣势) Memcache,Redis 都是内存数据库 redis是一个开源的支持多种数据类型的key=> ...
- linux 配置环境变量三种方式
一:用于当前终端: export PATH=$PATH:<你的要加入的路径> 此方式仅用于当前终端,一旦该终端关闭,则配置失效 二:用于当前用户: vi ~/.bashrc 然后加入:ex ...
- CSS的四种定位的参照物
一.static定位 HTML 元素的默认值,即没有定位,遵循正常的文档流对象. 静态定位的元素不会受到 top, bottom, left, right影响. <!DOCTYPE html&g ...
- Spring-data-jpa n+1问题
Spring-data-jpa的n+1问题 当我们使用JPA提供给我们的find方法时,如果查询出来的对象关联着另外10个对象,那么JPA将会发送1+10次查询(这个对象本身要查询一次,然后每个关联对 ...
- Delphi 数据类型
- centos7搭建安装superset
superset官网: https://superset.incubator.apache.org/ 系统环境:system:centos7 一.安装工具及依赖包安装工具包:yum -y instal ...
- Linux学习--第十一天--source、环境变量目录、欢迎信息、正则、cut、awk、sed、sort、判断表达式、if、for、case、一些脚本
source source /root/.bashrc #让修改后的配置文件在不重启系统的情况下生效.source等同于. 环境变量目录 /etc/profile /etc/profile.d/*.s ...
- 测试 windows 发布日志
<script>alert("hellow world")</script>
- jquery 判断是否为空
jquery 判断是否为空 if(my_val == null || my_val == undefined || my_val==""){ console.log("我 ...
- Ubuntu 16.04 orb-slam2配置
说明:Ubuntu 16.04以及必要的基础软件安装完成之后进行: 1.OpenNI2安装(可选) 安装依赖项: sudo apt--dev freeglut3-dev doxygen graphvi ...