概述

今天在做 Vue 移动端项目的时候遇到了滚动穿透问题,在网上查资料后,选取了我觉得最好的方法,记录下来供以后开发时参考,相信对其他人也有用。

上层无需滚动

如果上层无需滚动的话,直接屏蔽上层的 touchmove 事件即可。示例如下:

  1. <div @touchmove.prevent>
  2. 我是里面的内容
  3. </div>

上层需要滚动

如果上层需要滚动的话,那么固定的时候先获取 body 的滑动距离,然后用 fixed 固定,用 top 模拟滚动距离;不固定的时候用获取 top 的值,然后让 body 滚动到之前的地方即可。示例如下:

  1. <template>
  2. <div @click="handleHambergerClick"></div>
  3. </template>
  4. <script>
  5. export default {
  6. name: 'BaseHeaderMobile',
  7. data() {
  8. return {
  9. isHeaderVisible: false,
  10. };
  11. },
  12. methods: {
  13. handleHambergerClick() {
  14. // hack: 滑动穿透问题
  15. if (!this.isHeaderVisible) {
  16. this.lockBody();
  17. } else {
  18. this.resetBody();
  19. }
  20. this.isHeaderVisible = !this.isHeaderVisible;
  21. },
  22. lockBody() {
  23. const { body } = document;
  24. const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  25. body.style.position = 'fixed';
  26. body.style.width = '100%';
  27. body.style.top = `-${scrollTop}px`;
  28. },
  29. resetBody() {
  30. const { body } = document;
  31. const { top } = body.style;
  32. body.style.position = '';
  33. body.style.width = '';
  34. body.style.top = '';
  35. document.body.scrollTop = -parseInt(top, 10);
  36. document.documentElement.scrollTop = -parseInt(top, 10);
  37. },
  38. },
  39. };
  40. </script>

Vue项目移动端滚动穿透问题的更多相关文章

  1. 【JS】341- 移动端滚动穿透的6种解决方案

    前言 相信能看到这篇文章的你,已经是遇到了这个问题.我就不gif展示问题效果了. 鉴于此问题是面试的常客,故特地针对滚动穿透这个疑难杂症,整理了六个解决方案. 各方法操作难易不同,分别针对弹层和bod ...

  2. vue项目更改端口号

    vue项目的默认端口为8080,有时候处于某些原因会造成端口号的冲突,因此需要我们适当的更改其端口号来解决问题,将上图中的port更改为合适的端口号就可以,但是需要注意的是浏览器的安全限制端口号详情见 ...

  3. 基于vue-cli的vue项目移动端样式适配,lib-flexible和postcss-px2rem

    安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --save ...

  4. 基于vue-cli3的vue项目移动端样式适配,lib-flexible和postcss-px2rem

    1,安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --sa ...

  5. vue项目上滑滚动加载更多&下拉刷新

    上滑滚动时获取内容高度.屏幕高度和滚动高度(此处#sslist要为内容是id) 内容高度  let innerHeight = document.querySelector("#sslist ...

  6. vue中移动端滚动事件,点击一次触发了事件两次(better-scroll)

    解决办法一: 将button标签换成a标签 问题代码: <span class="submitBtn" @click.stop="replyReport()&quo ...

  7. 基于animate.css动画库的全屏滚动小插件,适用于vue.js(移动端、pc)项目

    功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...

  8. 弹层蒙版(mask),ios滚动穿透,我们项目的解决方案

    问题描述 项目开发遇到一个ios独有的问题,在wkwebview中稳定复现 问题: 弹出一个蒙版,当在蒙版上面滑动的时候蒙版后面的内容滚动了 这当然是ios的bug,但是经过我们测试iphone7也会 ...

  9. Vue项目用于Ios和Android端开发

    起因 前公司商城App项目使用的是H5开发,有微信公众号.Ios和Android三个版本,H5版本是自己写的一套框架,已经用了有些年头了,承载不下不断涌现出的新需求.而Ios和Android端通过we ...

随机推荐

  1. python字符串/列表/字典互相转换

    python字符串/列表/字典互相转换 目录 字符串与列表 字符串与字典 列表与字典 字符串与列表 字符串转列表 1.整体转换 str1 = 'hello world' print(str1.spli ...

  2. Linux基础命令练习题(附答案)

    1.分别用cat \tac\nl三个命令查看文件/etc/ssh/sshd_config文件中的内容,并用自己的话总计出这三个文档操作命令的不同之处? [root@localhost ~]# cat ...

  3. iptable防火墙原理

    iptable防火墙原理 简介 Linux 2.0 ipfs/firewalld Linux 2.2 ipchain/firewall Linux 2.4 iptables/netfilter (ip ...

  4. Jmeter分布式测试dubbo接口2

    上次我们将dubbo接口与jmeter集成起来,但是jmeter是由java实现的,本身有很多限制,无法实现高并发,我们需要借助分布式来实现大压力测试. 在上次的例子中,我们只是实现了简单的dubbo ...

  5. element-ui升级笔记;echarts图表100px问题

    1.element-ui的2.7以后的版本支持树形table结构的数据,考虑优化一下表格,就升级了,但是升级到最新的版本2.12发现table都出不来了,于是降级到2.7.目前功能正常,2.12的bu ...

  6. Codeforces 989 P循环节01构造 ABCD连通块构造 思维对云遮月参考系坐标轴转换

    A 直接判存不存在连续的三个包含A,B,C就行 /*Huyyt*/ #include<bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a ...

  7. 五大Linux简单命令解决系统性能问题

    五大Linux简单命令解决系统性能问题 2010-12-17 10:07 James Turnbull TechTarget中国 字号:T | T 管理Linux主机的性能看起来经常象是在变魔术一样. ...

  8. windows下查看C语言字符数组(俗称:字符串)在内存中地址信息的操作过程

      #include <stdio.h> #pragma warning(disable:4996) int power10(int n) { ) { ; } ; ; i < n; ...

  9. 【NOIP2016提高A组五校联考4】label

    题目 题目 20%算法 设\(f_{i,j}\)表示第i个节点选了j这个权值的方案数. 显然转移方程为,\[f_{i,j}=\Pi_{v=son(i)}(\sum_{k=1}^{j-k}f_{v,k} ...

  10. 基于Ubuntu 搭建 WordPress 个人博客 - 开发者实验室 - 腾讯云

    1.准备 LAMP 环境 安装 Apache2 在终端输入该命令 ,使用 apt-get 安装 Apache2: sudo apt-get install apache2 -y 安装好后,您可以通过访 ...