移动端弹窗滚动时,底部盒子跟着一起滚动

潇影D 潇影D     2022-10-04     685

关键词:

解决方案

  在弹出弹窗的时候,设置window最外层定位为fixed,这样window便不会滚动了,在关闭弹窗的时候,设置window体定位为static,window便可重新滚动。

  另外,弹出时设置定位为fixed会使window回到顶部,可以通过js获取当时的scrollTop,固定设置top负值。

  关闭的时候window也会回到顶部,也可以通过js获取当时的scrollTop,固定设置scrollTop值。

解决:vue弹窗滑动底部页面跟着滑动

参考技术A但是这种方法会导致弹窗无法滚动若想弹窗滚动,1.这里使用了vant的弹窗组件,能解决弹窗滚动问题但是在ios手机上斜着滑蒙罩层还是会导致低层页面滚动2.这里想到一个稍微巧妙点的想法:因为弹窗需要滚动干脆就把... 查看详情

移动端弹出层之后禁用底部滚动条关闭回到原位置

$("cli-open").click(function(){ varscrollTop=document.body.scrollTop;//保存点击前滚动条的位置 window.onscroll=function(){ document.body.scrollTop=scrollTop;//赋值给滚动条的位置 }})$(".cli-close").click(function(){ window 查看详情

移动端弹出层之后禁用底部滚动条关闭回到原位置

$("cli-open").click(function(){varscrollTop=document.body.scrollTop;//保存点击前滚动条的位置window.onscroll=function(){document.body.scrollTop=scrollTop;//赋值给滚动条的位置}})$(".cli-close").click(function(){window.onsc 查看详情

移动端遮罩层滚动时,禁止底部滑动

参考文章关键css:body.modal-openposition:fixed;width:100%;关键js://解决移动端弹出层滚动穿透问题varModalHelper=(function(bodyCls)varscrollTop;returnafterOpen:function()scrollTop=document.scrollingElement.scrol 查看详情

移动端遮罩层滚动时,禁止底部滑动

...关键css:body.modal-openposition:fixed;width:100%;关键js://解决移动端弹出层滚动穿透问题varModalHelper=(function(bodyCls)varscrollTop;returnafterOpen:function()scrollTop=document.scrollingElement.scrollTop;document.body.classList.add(bodyCls);document.body.style.top... 查看详情

客户须知等内容在移动端弹窗查看分页vue如何实现

参考技术A在移动端弹窗打开客户须知等内容,找到methods选项选择分页vue方法,就可实现客户须知等内容在移动端弹窗查看分页vue。选项选择分页vue方法后,当页面滚动到低部时去查询客户须知等内容,就可实现客户须知等内容... 查看详情

vue解决ios弹层滚动,底部body跟着滚动问题

...详细说明,这个时候需要弹层来显示,弹层内容较长需要滚动,但是当滚动到底部时body会滚动,当我们关闭弹层时页面阅读的位置发生了变化,用户又要重新找到阅读的地方,这样用户体验极不友好。网上找了很多的资料,最... 查看详情

移动端弹出层滚动卡顿解决方案(代码片段)

IOS:-webkit-overflow-scrolling:touch;overflow-scrolling:touch;安卓:-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);安卓的表现仍然不够流畅。但是至少没之前那么卡顿了。。。 查看详情

移动端弹出层平滑滚动和fix定位的冲突(代码片段)

#branch-listoverflow:scroll;-webkit-overflow-scrolling:touch;/*ios平滑滚动*/overflow-scrolling:touch;-webkit-transform:translate3d(0,0,0);/*android平滑滚动*/transform:translate3d(0,0,0);height:6.5rem;为了弹出层的 查看详情

当滚动条与jQuery一起移动时如何隐藏Div?

】当滚动条与jQuery一起移动时如何隐藏Div?【英文标题】:HowtohideaDivwhenthescrollbarismovingwithjQuery?【发布时间】:2011-11-1511:58:24【问题描述】:我只希望#menu在滚动条移动时淡出,以提供一个不那么杂乱的界面。是否有代码允许这... 查看详情

CSS全屏背景在移动设备上滚动时底部显示白条

】CSS全屏背景在移动设备上滚动时底部显示白条【英文标题】:CSSfullscreenbackgroundshowswhitebaratbottomwhenscrollingonmobile【发布时间】:2021-03-1803:20:30【问题描述】:我有一个带有全屏背景图片的网站。html,bodyheight:100vh;htmlbackground:url(\'... 查看详情

弹出框滑动,底部不跟着滑动

弹出框里有滚动条,并且页面也有滚动条时,在弹出框内滑动时底部页面也会跟着滑动,试了下当弹出框出现时加上$(‘body‘).css({‘height‘,‘100%‘,‘overflow‘,‘hidden‘});不起作用,后来在弹出框上加上以下代码便起作用了。$(... 查看详情

移动端body设置overflow:hidden失效与设置之后页面会向上滚动问题(代码片段)

...在浏览器端调试的时候是能够达到预想中的效果,结果在移动端不管是iOS还是安卓系统都是无效的,在度娘上查看了前辈 查看详情

ugui用手柄或者键盘控制选择scrollview中的游戏对象时,滚动条跟着移动(代码片段)

还没写完,明天继续1.新建一个ScrollView,删掉横向的滚动条,并且把ScrollView的ScrollRect组件的HorizontalScrollbar设置为None,如图: 2.我想弄一个显示3行4列的,所以ScrollView得Height改为240(3的倍数),Width改为400(没特殊要求),Viewport和Content也要... 查看详情

如何div滚动时主页面不跟着滚动?

主页面某按钮点击后弹出DIV,主页面和弹出的DIV均有滚动条,如何在弹出的DIV上滚动条滚动时,主页面的滚动条不跟着一起滚动?在弹出DIV的时候暂时取消主页面的滚动条,关闭DIV的时候再恢复滚动条:<html><head><style... 查看详情

移动 Safari - 输入插入符号不会随着溢出滚动一起滚动:触摸

】移动Safari-输入插入符号不会随着溢出滚动一起滚动:触摸【英文标题】:MobileSafari-Inputcaretdoesnotscrollalongwithoverflow-scrolling:touch【发布时间】:2014-01-1107:34:33【问题描述】:我知道MobileSafari在“动量”(-webkit-overflow-scrolling:touch;)... 查看详情

自助移动端弹窗

 移动端能用alert弹窗么?嘿嘿,自己搞一个。functionalertdiv(){varalertdiv=$(‘<divclass="overlay"style="z-index:99999;left:0px;"><divclass="phone-alert"><divclass="phone-alert-panel"><divclass=" 查看详情

Google ReCaptcha 在 ios 设备上验证时滚动到页面底部

...题描述】:我在联系表单上使用googlerecaptcha。问题是,在移动设备上,当验证googlerecaptcha时,它会将使用向下滚动到页面底部。然后用户必须再次向上滚动才能提交特定 查看详情