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

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

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

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

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

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

 

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

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

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

 

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

 

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

STM32 I²C外设深度解析:时序配置、主从模式与可靠性工程 I²C是一种广泛应用于嵌入式系统的同步串行总线协议,其核心在于精确的时序控制与可靠的电气特性匹配。理解SCL/SDA信号建立/保持时间、上升下降沿约束及硬件滤波机制,是保障通信稳定的基础;STM32通过I2C_TIMINGR寄存器实现对PRESC、SCLH、SCLL、SDADEL和SCLDEL等关键参数的精细调控,直接影响tSU:DAT、tVD:DAT等标准时序合规性;该能力支撑工业级高可靠场景下的主从双向通信、时钟拉伸管理与错误恢复;本文聚焦STM32平台,结合寄存器级配置、状态机行为与实战调试经验,系统 阅读详情

相关推荐

使用WSL2安装ubuntu系统并配置深度学习环境

wsl2安装ubuntu部署深度学习环境的方法

u013358093的博客 2701

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

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

u010833605的博客 2万+

别再乱调了!Zygo MetroPro软件滤波功能保姆级指南,从均值到鲁棒高斯样条一次讲清

本文深入解析Zygo MetroPro软件的滤波功能,从均值滤波到鲁棒高斯样条等九种算法,帮助用户根据测量对象特性选择最佳滤波组合。通过真实工业案例和参数配置指南,提升光学测量数据的准确性和效率,特别适用于硅晶圆、光学镜片等精密测量场景。

weixin_30888413的博客 156

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

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

m0_63853518的博客 4819

【无线通信】射频杂散(RF Spurious Emissions)

射频杂散(RF Spurious Emissions)是指在无线通信系统中,除了在指定频率范围内的预期信号之外,任何不需要的或非预期的射频信号。这些杂散信号可能会干扰其他通信系统,降低系统性能,并违反无线电通信法规。射频杂散通常包括谐波、次谐波、互调产物和其他非线性失真所产生的信号。

qq_38801607的博客 5424

Abaqus子程序开发避坑指南:从UMESHMOTION到齿轮磨损分析实战

本文深入探讨Abaqus子程序开发中的关键技术与避坑指南,重点解析UMESHMOTION在齿轮磨损分析中的实战应用。从开发环境搭建、调试框架构建到性能优化和大规模计算,提供系统化的解决方案。通过真实案例展示如何避免内存泄漏、网格畸变等常见问题,并介绍数据驱动的磨损预测等前沿技术,帮助工程师提升仿真精度与效率。

weixin_30892037的博客 88

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万+

ISO 15118-20标准深度解读【精简篇】

ISO 15118-2 是开创者,它解决了“如何让电动汽车充电像给手机充电一样简单(即插即用且自动付费)”的问题,为行业奠定了基础。 ISO 15118-20 是革新者,它站在前者的肩膀上,回答了一个更宏大的问题:“如何让电动汽车深度融入未来的能源系统和智慧城市?” 它不仅是充电协议,更是一个车网互动的综合能源管理协议。简单来说,ISO 15118-2 是关于“如何充电”,而 ISO 15118-20 是关于“如何智慧地使用和管理电动汽车这块大电池”。

网络安全的研究者、新能源行业的追求者 1925

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

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

ddr66288的博客 3466

银河麒麟V10ARM架构服务器离线安装docker\nacos【附安装包】

本文分享了在银河麒麟ARM64操作系统上安装Docker和Nacos的完整过程。首先提供了Docker的自动化安装脚本,包含服务配置、存储路径设置等关键步骤,并给出了常用维护命令。接着详细介绍了通过Docker-compose部署Nacos的方法,包括镜像导入、配置文件修改、鉴权设置等注意事项,特别强调了密钥长度必须超过32个字符的要求。文章还提供了Nacos初次登录的注意事项,并预告了后续可能推出的Redis、Nginx等安装教程。所有配置文件和脚本均可直接下载使用,适合内网环境下国产操作系统的部署

weixin_39054697的博客 2344

166、Sim2Real中的强化学习:域随机化与鲁棒策略

第二,训练时监控每个随机化维度对策略梯度的贡献,如果某个维度对loss的方差贡献极小,说明策略已经忽略它了,要么加大范围,要么删掉。第四,如果条件允许,用真实数据来校准随机化分布——采集真机上的传感器数据,拟合出参数分布,再把这个分布作为随机化的采样依据,这比拍脑袋定范围靠谱得多。动态随机化是很多人忽略的维度。域随机化的核心思想说白了就一句话:别去精确建模现实,而是把仿真环境本身变成一个随机分布的集合,让策略在“各种乱七八糟的物理参数”里都见过世面,这样到了真机上,不管现实落在哪个参数区间,策略都能兜住。

sundong_81的博客 27

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

一,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

【Segment Anything Model】三:SAM模型微调自定义数据集,更改混合提示方式:点,框,点框混合

1.微调SAM预备知识。

cvxiayixiao的博客 1万+

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

弹出层上禁止页面滚动

anfisherman的博客 5055

假人有限元模型

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

SAP B1中文培訓教材_SDK

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

移动端禁止页面滑动

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

weixin_42284117的博客 3107

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

关于移动端禁止滑动事件

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

angou1937的博客 706

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

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、付费专栏及课程。

余额充值