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 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
小程序实现多选框功能
Oct 30 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
php微信开发之图片回复功能
2018/06/14 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
javascript 函数调用规则
2009/08/26 Javascript
Javascript图像处理—平滑处理实现原理
2012/12/28 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
js实现简单扫雷
2020/11/27 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
python编写简单端口扫描器
2019/09/04 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
数学检讨书1000字
2014/02/24 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
学位证书委托书
2014/09/30 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
就业推荐表院系意见
2015/06/05 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android