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

不念不忘少年蓝@ 2022-05-31 05:17 239阅读 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 条评论，239人围观）

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

相关阅读

相关移动端h5页面软键盘弹出后背景图片被顶上去

移动端h5页面在软键盘弹出后，body的高度被压缩了，就导致原本高度100%的背景图被顶上去一截，需要把div的高度强行设回100%才能解决这个问题 <div cla

深碍√TFBOYSˉ_/ 2023年07月05日 10:17/ 0 赞/ 15 阅读

相关小程序自定义弹窗后禁止屏幕滚动（滚动穿透）

弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。解决方法：在弹出层加上 catchtouchmove 事件示例代码： <view c

╰半橙微兮°/ 2023年02月17日 03:46/ 0 赞/ 13 阅读

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

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

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

相关移动端H5页面注意事

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

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

相关移动端禁止页面滑动

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

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

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

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

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

相关移动端禁止页面滚动

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

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

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

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

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

相关移动端 H5页面适配

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

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

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

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

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