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 相关文章推荐
菜单效果
Oct 14 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
详解微信UnionID作用
May 15 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 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无限级栏目分类读取的实现代码
2014/02/19 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
php截取视频指定帧为图片
2016/05/16 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
Python的requests网络编程包使用教程
2016/07/11 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
pytorch打印网络结构的实例
2019/08/19 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
微型企业创业投资计划书
2014/01/10 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
美丽心灵观后感
2015/06/01 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
javascript canvas实现雨滴效果
2021/06/09 Javascript
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL
java版 联机五子棋游戏
2022/05/04 Java/Android