Vue项目移动端滚动穿透问题的实现

2024-09-29 09:03:32

概述

今天在做 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 移动端滚动穿透内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue 弹框产生的滚动穿透问题的解决

最近开发过程中遇到一些小问题(似乎问题总是那么多),但一直没什么时间去优化与解决.程序员不能被业务绑架,有时间还是花点在代码,开始这次的vue尝试吧. 首先定义一个全局样式: .noscroll{ position: fixed; left: 0; top: 0; width: 100%; } 创建一个dom.js文件,定义几个方法: export function hasClass(el, className) { let reg = new RegExp('(^|\\s)' + classN
Vue项目移动端滚动穿透问题的实现

概述今天在做 Vue 移动端项目的时候遇到了滚动穿透问题,在网上查资料后,选取了我觉得最好的方法,记录下来供以后开发时参考,相信对其他人也有用. 上层无需滚动如果上层无需滚动的话,直接屏蔽上层的 touchmove 事件即可.示例如下: <div @touchmove.prevent> 我是里面的内容 </div> 上层需要滚动如果上层需要滚动的话,那么固定的时候先获取 body 的滑动距离,然后用 fixed 固定,用 top 模拟滚动距离:不固定的时候用获取 top 的值
vue中pc移动滚动穿透问题及解决

目录 vue pc移动滚动穿透问题上层无滚动(很简单直接@touchmove.prevent) 上层有滚动滑动穿透终极解决方案问题描述问题探究原理探究 vue pc移动滚动穿透问题上层无滚动(很简单直接@touchmove.prevent) <div @touchmove.prevent> 我是里面的内容 </div> 上层有滚动如果上层需要滚动的话,那么固定的时候先获取 body 的滑动距离,然后用 fixed 固定,用 top 模拟滚动距离:不固定的时候用获取 t
vue项目移动端实现ip输入框问题

vue框架移动端做ip输入框组件,input在浏览器和微信端兼容问题. 要求:只能输入数字,输入数字以外的字符(包括点.冒号等数字符号)时自动跳到下一段ip输入框. type=number类型,不会禁止点的输入.手动过滤拿不到包括点字符的字符串.而且输入多个点之后,拿到的值为空. 解决办法:type=tel,只能输入数字,且可以获取到点字符的输入问题:微信下keyup事件无效,回调事件中event.keyCode返回全是229. 解决办法:监听input事件,event事件对象中keycode
Vue解决移动端弹窗滚动穿透问题

一.问题描述在移动端的H5页面中,我们经常会遇到 "点击按钮-->弹窗-->选择选项" 这样的场景.而在选项过多出现滚动条时,滚动滚动条至容器的底部或者顶部.再往上或往下拖动滚动条时,滚动动作会出现穿透,这时候底部的body也会一起滚动. 问题总结:内容在滚动到容器的顶部或者底部时,再向上或向下强行滚动 ,则出现滚动穿透二.解决方案思考参考了网上一大堆的解决方法,大可分为三类方法.经过认真的思考和分析,个人的总结如下: 使用js去控制和改变css 1. 弹窗出现 1
vue中利用iscroll.js解决pc端滚动问题

项目中经常遇到区域超出部分会出现滚动条,滚动条在pc端可以通过鼠标滚轮控制上下,在移动端可以通过鼠标拖动页面进行滚动,这两种场景都是符合用户习惯,然而这种滚动条一般都是竖[vertical]项滚动条,如果pc端出现横向滚动条[horizontal],在不做处理的情况下,你只能用鼠标拖动横向滚动条按钮[scrollerbar]展示滚动区域,而且为了美观,一般滚动条会进行样式编写或者隐藏,那么横向区域默认情况下就没法滚动. 二.描述现为了解决pc端滚动区域能像移动端一样,能够通过鼠标拖动滚动区域直
vue项目中使用lib-flexible解决移动端适配的问题解决

第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible $ npm install lib-flexible --save 二.在项目的入口js文件中引入lib-flexible import 'lib-flexible' 通过要以上两步,就完成了在vue项目使用lib-flexible来解决移动端适配了. lib-flexible会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size
vue项目在webpack2实现移动端字体自适配功能

使用vue开发移动端页面时,往往需要实现页面根据不同设备屏幕进行尺寸的适配,实现将px自动换算成rem单位,其实只需要安装下面的两个插件即可快速实现移动端适配问题. 1 准备工作: a. 安装 px2rem-loader 插件:npm install px2rem-loader --save: b. 安装 lib-flexible 插件:npm install lib-flexible --save; 2 插件的作用: px2rem-loader插件的作用:我们通过配置基准,实现将px自动换算成
vue-cli或vue项目利用HBuilder打包成移动端app操作

一.测试项目是否可以正确运行指令:npm run dev 1.首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目二.修改路径 (assetsPublicPath: './') 1. 打开我们config中的js文件,修改assetsPublicPath的路径为"./"(下图的右下角位置) 2. 检查下assetsRoot: path.resolve(__dirname, '-/dist'), assetsSubDirectory: 'static',
vue实现移动端项目多行文本溢出省略

多行文本溢出省略在做微信公众号开发时,有个需求是这样的找到了一个方法, <div> 2323文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示.文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示.文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示.文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示.文字提示气泡框,在鼠标悬停时显示,代替了系统的title提示. </div>  <!--

Vue项目移动端滚动穿透问题的实现

相关推荐

随机推荐