javascript移动端手机事件,禁止页面滑动

移动端H5页面遇到的问题总结 最近刚做完一个移动端的项目,产品之无敌,过程之艰辛,我就不多说了,记录下在这个项目中遇到的问题,以防万一,虽然这些可能都是已经被N多前辈解决掉了的问题,也放在这里,算是为自己漫漫前端路铺了一颗小石子儿吧,也在文末留下自己未能解决的疑问,希望看到的朋友能解惑。   都知道做移动端的开发,在电脑上调试好了的东西,放在手机里可能真的秒秒钟就炸了,我发誓绝对没想到炸的这么快。。。   1、IO 阅读详情

今天用JS原生写了一个移动端手机页面js弹窗,

一切顺顺利利的写完之后,突然发现,点出弹窗之后,遮罩层下面的页面还是能上下滑动,那个头痛啊!

网上看了好多方法,因为说的不是很清楚,所以  也没起什么作用

最后,终于用如下的方法解决了:

 

1、把html、body的height都设置为100%,

2、把html、body的overflow都设置为hidden,

3、关掉弹窗,再还原一下html、body的属性即可

 

ok!解决了,当然,处理这个问题的方法有N+1种,但是上述方法还是很适合JS初学者的!

 

当然了也希望大家多支持我正在做的  上海时尚网   吐舌头  加油哦!

解决vscode无法运行npm命令的问题(cmd可行) Powershell以及vscode中npm命令使用不了 阅读详情

相关推荐

微信自动化进阶:Python识别特定消息并自动回复(基于win32api控件操作)

本文详细介绍了如何使用Python和win32api实现微信消息的智能监控与自动回复。通过精准识别聊天记录中的特定关键词,结合多级匹配策略和性能优化技巧,构建稳定高效的自动化回复系统,适用于企业客服、个人助手等场景。

weixin_42663213的博客 441

html页面,手机模拟器不能滑动,但是鼠标能滚动

今天遇到一个很悲催的事情,就是发现,写的h5页面在chrome手机模拟器下竟然不能滑动,主要有一个根本不能滚!还有几个一下能滚,一下不能滚,然后我就傻逼了。悲催归悲催,问题总归要解决的,请教了一个年长的前端,他居然说肯定是我的CSS样式有问题,然后我就开始检查我的样式,一个一个是过来,发现没有问题啊;走到这里你要是觉得还是没有说服力,那我教你一个办法,直接写上20个p标签,里面加文字,不要任何样式,

u010833605的博客 2万+

Excel曲线拟合实战:从基础趋势线到高级回归分析

本文系统介绍了Excel曲线拟合的完整工作流,从基础的散点图与趋势线应用,到利用Solver插件进行自定义高级回归分析。文章详细讲解了线性、多项式、指数、对数等六大常用数学模型的适用场景与选择方法,并强调了通过R²值、残差图评估拟合效果、避免过拟合与外推风险的关键步骤,帮助读者掌握从数据探索到预测评估的实战技能。

weixin_29280219的博客 534

h5移动端页面不能滑动的问题--记录

h5移动端页面不能滑动的问题--记录

m0_63853518的博客 4819

手把手教你用STM32CubeMX和HAL库驱动DW3000:从SPI配置到第一个测距Demo

本文详细介绍了如何使用STM32CubeMX和HAL库驱动DW3000 UWB定位通信模块,从SPI配置到实现厘米级测距Demo的全过程。涵盖硬件连接、SPI通信调试、驱动移植及双向测距(TWR)算法实现,帮助开发者快速掌握UWB高精度定位技术,适用于仓储物流、智能家居等场景。

weixin_27038245的博客 485

瑞芯微RK3576开发板实战:6TOPS NPU如何加速你的AIoT项目(附性能测试)

本文以瑞芯微RK3576开发板为核心,深入探讨其6TOPS NPU在AIoT项目中的实战应用。通过详细的性能测试对比,展示了NPU如何将AI模型推理速度提升15倍以上,并大幅降低CPU负载。文章涵盖从环境搭建、模型转换优化到多屏异显与系统级调优的全流程,为开发者提供了将硬件算力转化为实际项目加速效果的完整指南。

oauth7security的博客 820

video使用安卓手机在播放状态或者播放后浮在最上层问题

MPEG-4视频,支持2.5Mbps、640*480像素、30帧每秒、AAC-LC音频,速率为160Kbps、48kHz,立体声音频输入的.m4v、.mp4、.mov格式。240像素、30帧每秒、支持1.3版的AAC-LC音频,速率为160Kbps、48kHz,立体声音频输入的.m4v、.mp4、.mov格式。视频设置背景图,透明。

哈喽234的博客 1万+

亚马逊SP-API授权实战:从OAuth流程到Refresh Token获取

本文详细解析了亚马逊SP-API授权流程,从OAuth认证到Refresh Token获取的全过程。通过实战经验分享,帮助开发者快速掌握Marketplace Appstore、Website Workflow和自行授权三种方式,解决常见错误如MD5100和MD9999,并提供了安全存储Refresh Token的最佳实践。

weixin_30379531的博客 518

关于移动端的滑动无效的问题

  之前遇到这样一个问题,自己写的那部分在自己的电脑和所有手机上都是ok的,但是当把这个部分和同事的那部分合到一起的时候,出现了一个问题,那便是曾经设置overflow:auto的部分无法滑动,原本以为是两个人的代码出现了冲突,可是检查过后并不是这个原因,经过查找之后,再分析overfolw:auto盒子的高度、添加-webkit-overflow-scrolling:touch都没有用...

ddr66288的博客 3466

一、适配显示服务

基于rk3568适配显示服务,调动gpu;

XiaoC_Android的博客 1001

Doris实战——结合Flink构建极速易用的实时数仓

Doris实战——结合Flink构建极速易用的实时数仓

爱吃辣条的博客 8230

移动端页面兼容性解决方案

一,css部分   1,meta标签 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1, minimum-scale=1,user-scalable=no"/>移动端加上这个标签才是真正的自适应,不加的话,假如你把一个980px宽度(手机端常规是980)的P...

weixin_30687811的博客 349

android 如何分析应用的内存(十六)——使用AS查看Android堆

在前面,先介绍了如何使用jdb和VS code查看应用栈相关内容。本文将介绍,如何查看堆中的内容。

安仔的博客 4254

移动端弹出层上禁止页面滚动

弹出层上禁止页面滚动

anfisherman的博客 5055

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

移动端禁止页面滑动

今天碰到一个问题,用$(‘html’).css(“overflow”,“hidden”)禁止滚动在移动端竟然无效,不知道什么原因,所以又试了几个移动端禁止滑动方法,供参考。 方法一:(经测试有效) 禁止滑动 document.body.addEventListener('touchmove', function (e) { e.preventDefault() }, {passive: fals...

weixin_42284117的博客 3107

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

关于移动端禁止滑动事件

最近在项目中遇到关于禁止移动端滑动事件,记录下,以便以后查找。 项目中页面需要一个弹窗效果,但有弹窗的同时希望不要屏幕滑动,弹窗取消,屏幕可滑动。 document.addEventListener('touchmove', function (event) { if($scope.isSeekShow) { //此为弹窗显...

angou1937的博客 706

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

html禁止页面左右滑动,js阻止移动端默认事件以及只阻止横向滚动事件方法

js阻止移动端默认事件,是在相关的touch事件的时候利用event.preventDefault();来阻止默认滚动行为,但是如果要实现阻止横向滚动行为而不阻止竖向滚动行为就要写一个方法通过手指滑动的偏移量来判断了。在手机移动端手指在滑动整个屏幕时,会影响浏览器的行为,比如滚动和缩放。所以在调用touch事件时,所以要先禁止缩放。移动端禁止缩放通过meta元标签来设置。移动端禁止滚动preven...

weixin_30744857的博客 4662

手机端 js禁止页面滚动

开发移动端页面的时候有一个很比较常见的需求,在出现弹窗时,禁止滑动弹窗后面的主体页面。如何实现呢,往下看 js实现整个页面禁止滚动: document.body.addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive: false }); //passive 参数不能省略...

wolf 4004

手机端禁止页面滑动

今天在做页面弹层时遇到个问题,在浏览器模拟机中,可以用 1 $("body").css("overflow", "auto"); 2 $("body").css("overflow", "hidden"); 控制背景的是否滑动,但是在真机测试时傻眼了,经过各种百度以及尝试,最终搞定,以下是代码 //定义阻止事件传递 function eventStop (event){ ...

weixin_30617695的博客 2762

移动端屏幕禁止滑动

最近做移动端,弹出框加遮罩层后禁止滑动 //实现滚动条无法滚动 var mo=function(e){e.preventDefault();}; /***禁止滑动***/ function stop(){         document.body.style.overflow='hidden';                 document.addEventListene

lz305263的博客 6670

移动端滑动穿透事件,支持ios、Android

直奔主题,这两天我负责开发的app内容遇到了一个问题:弹框底层页面还是能滑动问题(在Android和ios12系统一下是正常的,ios高版本可滑动)也就是我们所说的滑动穿透事件           我遇到的两种情况: 第一种:如图(当弹框中内容不需要滑动) 遇到这种情况网上一顿找,看看是什么原因造成的。说简单点就是滑动穿透事件造成 滑动穿透事件:有一层遮罩蒙层覆盖在body上时,当我们...

zeng092210的博客 4056

html禁止页面左右滑动,手机端禁止浏览器左右滑动

在手机端vue项目中,禁止页面左右滑动,代码直接写在index.html中var startPos = 0,endPos = 0,isScrolling = 0;document.addEventListener(‘touchstart‘,function(event){var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch,取...

weixin_34394074的博客 3595

阻止移动端H5开发浏览器默认左右滑动行为

Touch事件小知识 1.避免点击300ms延迟 css: *{ touch-action: manipulation;} 正题:如何解决H5移动端开发浏览器默认左右滑动事件 在进行移动端开发时,由于浏览器自带的滑动行为,使手指只要左右滑动页面就可以上一页,下一页的跳转,体验可以说是十分的不好。为了解决这个问题,我在网上进行了一番搜索以及一番尝试得出了下面两种方法。现在就下...

qq_37028216的博客 2万+

html 禁止页面滑动,【移动端】js禁止页面滑动与允许滑动

禁止页面滑动通常静止滑动方案:(阻止滑动事件)window.ontouchmove=function(e){e.preventDefault&&e.preventDefault();e.returnValue=false;e.stopPropagation&&e.stopPropagation();returnfalse;};有部分机型不支持以上静...

weixin_35418139的博客 1347

JS移动端禁止页面左右滑动导致页面跳转

JAVASCRIPT上行空间团队 JS移动端禁止页面左右滑动导致页面跳转。

HeeRing的博客 833

js 阻止弹出层底部页面滑动

注:代码可能和其他博客相似,毕竟原理都是一样的。 一、源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>弹出层底部不能滑动</title> &lt

qq_42683219的博客 2069
下一篇: 移动端安卓系统中,固定在底部的按钮被输入框的键盘顶上去的问题解决办法
andyfine
博客等级 码龄18年 6粉丝 2原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值