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 相关文章推荐
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
JS+CSS实现过渡特效
Jan 02 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 iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
asp 的 分词实现代码
2007/05/24 Javascript
Firefox window.close()的使用注意事项
2009/04/11 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
Python实现全排列的打印
2018/08/18 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
Django框架表单操作实例分析
2019/11/04 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
如何定义TensorFlow输入节点
2020/01/23 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
材料成型专业个人求职信范文
2013/09/25 职场文书
新教师工作感言
2014/02/16 职场文书
英语教师个人总结
2015/02/09 职场文书
研究生简历自我评
2015/03/11 职场文书
写给老师的保证书
2015/05/09 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis