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 相关文章推荐
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
javascript事件模型实例分析
Jan 30 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 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 获取客户端的真实ip
2009/11/30 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
php读取本地json文件的实例
2018/03/07 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
任意位置显示html菜单
2007/02/01 Javascript
用JavaScript显示随机图像或引用
2009/04/21 Javascript
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
生成二维码方法汇总
2014/12/26 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
js实现星星打分效果
2020/07/05 Javascript
JavaScript如何实现防止重复的网络请求的示例
2021/01/28 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
python实现定时发送qq消息
2019/01/18 Python
python django model联合主键的例子
2019/08/06 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
《藤野先生》教学反思
2014/02/19 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
医生个人年终总结
2015/02/28 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫
springboot实现string转json json里面带数组
2022/06/16 Java/Android