移动端h5页面弹窗出来后，禁止底层的背景页滚动

不念不忘少年蓝@ 2022-05-31 05:17 226阅读 0赞

先看图：  
![这里写图片描述][70]  
![这里写图片描述][70 1]  
![这里写图片描述][70 2]  
再需求和解决方法：  
1.需求：在一个可上下滑动的h5-index.html中，弹出一个固定于设备高度的奖励层。当奖励层弹出来之后：1.index页面不能出现滚动条，2.index不能自动置顶，要停留在触发事件的位置。  
2.解决方法：  
a.初始的css设置：

html,body { width: 100%; height:100%; overflow: scroll; }

b.触发奖励层事件时，即点击‘领取奖励’时:

//点击领取奖励
        $('.btn-getgift').on('click',function(){ 
            $('body').css({
             "overflow": "hidden",
             "height":'100%'
            })
            $('html').css({
             "overflow": "hidden",
             "height":'100%'
            })
            $(".alertGift2").removeClass('hide');
        })

c.关闭奖励层时:

//关闭奖励弹窗
        $('.btn-close,.btn-confirm').on('click',function(){ 
            $(".alertGift").addClass('hide');
            $('body').css({
             "overflow": "scroll"
            })
            $('html').css({
             "overflow": "scroll"
            })
        })

主要思路：overflow中的scroll和hidden两个属性的切换，不过body和html的高度设置为100%也是必须的。  
有用请点个赞，谢谢！！！

[70]: /images/20220531/9326573c142440318921e42900ba7112.png
[70 1]: /images/20220531/c9c434fc7d584efba66c801a6f63a078.png
[70 2]: /images/20220531/6c015ef09dd84b1aaa83096898069a4f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关混合开发笔记3——移动端h5页面滚动不自然

混合开发移动端h5页面滚动不自然描述：网页开发滚动会出现卡顿现象，不流畅，手机滑动，手指离开页面，直接停止滑动解决：手机滑动，手指离开页面滑动有缓冲效果，不

末蓝、/ 2022年12月02日 00:43/ 0 赞/ 156 阅读

相关移动端H5页面注意事

转载自：http://www.jianshu.com/p/e95824e8fe13 1. 单个页面内容不能过多设计常用尺寸：750 x 1334 / 640 x 11

悠悠/ 2022年07月10日 09:59/ 0 赞/ 272 阅读

相关移动端禁止页面滑动

var mo=function(e)\{e.preventDefault();\}; function stop()\{ document.

骑猪看日落/ 2022年06月07日 12:00/ 0 赞/ 252 阅读

相关移动端h5页面弹窗出来后，禁止底层的背景页滚动

先看图： ![这里写图片描述][70] ![这里写图片描述][70 1] ![这里写图片描述][70 2] 再需求和解决方法： 1.需求：在一个可上下滑动的

不念不忘少年蓝@/ 2022年05月31日 05:17/ 0 赞/ 227 阅读

相关移动端禁止页面滚动

H5页面超过一屏，点击某处弹出弹出框提示，默认情况下，页面还可以滑动。解决方法： //添加禁止屏幕滚动 document.querySelector('.eleme

喜欢ヅ旅行/ 2022年05月21日 11:26/ 0 赞/ 268 阅读

相关 h5app开发移动端屏幕禁止滑动

//实现滚动条无法滚动 var mo=function(e)\{e.preventDefault();\}; /\\\禁止滑动\\\/ function st

柔光的暖阳◎/ 2022年04月16日 20:13/ 0 赞/ 534 阅读

相关 h5页面禁止放大

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=

﹏ヽ暗。殇╰゛Y/ 2022年03月26日 09:28/ 0 赞/ 286 阅读

相关移动端做弹窗类页面注意事项

j结论：在前期ui出图的时候要考虑限制弹窗的最大高度，一定不可过高我们在一个模拟器上做看起来正常的一个弹窗时候即使已经调成了ihone5这么小的手机弹窗依然可以放下

左手的ㄟ右手/ 2022年01月07日 13:21/ 0 赞/ 246 阅读

相关移动端 H5页面适配

![这里写图片描述][1] 一、基础概念 -------------------- 在了解如何做H5页面适配前，大家都应该把移动端涉及的一些概念搞明白，比如：dpr

谁借莪１个温暖的怀抱￠/ 2021年09月18日 09:04/ 0 赞/ 678 阅读

相关移动端h5页面尺寸大小

移动端h5页面尺寸大小移动端H5的尺寸一般设计为640x1136px。既满足了显示需求，又能降低用户加载图片需要的带宽。可以用各种分辨率的移动智能手机查看我们设计的...

灰太狼/ 2020年06月08日 16:34/ 0 赞/ 929 阅读