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如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
每天一篇javascript学习小结(面向对象编程)
Nov 20 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
详解Node全局变量global模块
Sep 28 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
Ajax常用封装库——Axios的使用
May 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中养成7个面向对象的好习惯
2010/07/17 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
js select option对象小结
2013/12/20 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
js实现列表按字母排序
2020/08/11 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
使用Python生成XML的方法实例
2017/03/21 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
python with语句的原理与用法详解
2020/03/30 Python
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
英语专业毕业个人求职自荐信
2013/09/21 职场文书
幼儿园园长岗位职责
2013/11/26 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
网站推广策划方案
2014/06/04 职场文书
房屋维修申请报告
2015/05/18 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript