Vue项目移动端滚动穿透问题的实现


Posted in Javascript onMay 19, 2020

概述

今天在做 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项目移动端滚动穿透问题的实现的文章就介绍到这了,更多相关Vue 移动端滚动穿透内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
JQuery live函数
Dec 24 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
vue配置多页面的实现方法
May 22 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
JavaScript代码实现简单计算器
Dec 27 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 Javascript
vue和小程序项目中使用iconfont的方法
May 19 #Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 #Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 #jQuery
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 #Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 #Javascript
jQuery 动画与停止动画效果实例详解
May 19 #jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 #jQuery
You might like
php date与gmdate的获取日期的区别
2010/02/08 PHP
mac下安装nginx和php
2013/11/04 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
php车辆违章查询数据示例
2016/10/14 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
vue使用vue-cli快速创建工程
2017/07/28 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
Python中文件遍历的两种方法
2014/06/16 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
获取Django项目的全部url方法详解
2017/10/26 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
python推导式的使用方法实例
2021/02/28 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
MySQL面试题
2014/01/12 面试题
安全生产检讨书
2014/01/21 职场文书
治超工作实施方案
2014/05/04 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
学雷锋宣传标语
2014/06/25 职场文书
诉讼授权委托书
2014/10/15 职场文书
小浪底导游词
2015/02/12 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技