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学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
Vue表单实例代码
Sep 05 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
Vue修改项目启动端口号方法
Nov 07 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 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 xml-rpc远程调用
2008/12/19 PHP
PHP PDO函数库详解
2010/04/27 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
php blowfish加密解密算法
2016/07/02 PHP
文字幻灯片
2006/06/26 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
node.js超时timeout详解
2014/11/26 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python中的一些类型转换函数小结
2013/02/10 Python
Python获取当前时间的方法
2014/01/14 Python
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
Python实现某论坛自动签到功能
2019/08/20 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
《火烧云》教学反思
2014/04/12 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
婚礼新人答谢词
2015/01/04 职场文书
董事长新年致辞
2015/07/29 职场文书
js前端图片加载异常兜底方案
2022/06/21 Javascript