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 document.images实例
May 27 Javascript
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
关于js类的定义
Jun 28 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
微信小程序动态增加按钮组件
Sep 14 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
header()函数使用说明
2006/11/23 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
JavaScript的目的分析
2007/01/05 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Python中进程和线程的区别详解
2017/10/29 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
浅析Python数据处理
2018/05/02 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
python3中函数参数的四种简单用法
2018/07/09 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
python数据化运营的重要意义
2019/11/25 Python
tensorflow自定义激活函数实例
2020/02/04 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
建筑工程专业学生的自我评价
2013/12/25 职场文书
如何写好建议书
2014/03/13 职场文书
《恐龙》教学反思
2014/04/27 职场文书
团队激励口号
2014/06/06 职场文书
任命书范本大全
2014/06/06 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
研讨会致辞
2015/07/31 职场文书
2019年教师入党申请书
2019/06/27 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python