手机端弹出层弹出时弹出层的内容滚动,同时禁止body内容滚动

最近做的一个项目,手机端的网站,请问弹出层弹出的时候禁止页面底下的body页面内容滚动,但是同时又需要弹出层里面额内容可以滚动,这种效果怎么实现,试过获取页面的scrollTop,然后弹出层出现后给也页面scrollTop()到滑动的位置,但是这种方法在安卓系统上(特别是小米)上运行不流畅,各位同行有没有好的方法可以解决呢?

13个回答

在弹出层弹出的时候 给html和body 加样式 height:100%;overflow:hidden;很多人没有设置html的样式,所以导致不起作用!

qq_36608896
qq_36608896 贼好用
一年多之前 回复
lsy0125
lsy0125 回复lsy0125: 。。,手机端还是有问题的
大约 2 年之前 回复
lsy0125
lsy0125 问题解决
大约 2 年之前 回复
qq389216533
锤子馆长 回复dinglianxiu: 这种方式可行,html 和body都要加样式,单单加一个不行
2 年多之前 回复
dinglianxiu
dinglianxiu 请问你测试过吗?就发上来,,根本不行好吧,,
2 年多之前 回复
qq_21058391
前端小白的江湖路 正确的
大约 3 年之前 回复

请问现在问题解决了吗

兄台 我也遇到了相同的问题 啊 你解决了吗

不知道现在解决了么?用楼上的方法确实 整个页面会 跳到顶部去 引入iscroll.js倒是可以解决 但是 总感觉 这办法太。。。

LZ解决这个问题了吗?

html和body的height:100% 是写在css中的 overflow:hidden也都加了,但是浮层第一次弹出的时候 页面回到顶部了 浮层再弹出就不出现这种情况了,请问各位有没有遇到这种情况,怎么处理

qq_38204639
qq_38204639 我的也是这种情况,第一次会跳转,然后就不会回到顶部了,请问你后来是怎么解决的?
2 年多之前 回复

用$(".mask").on('touchmove',function(event) { event.preventDefault(); }, false);把整个遮照都变成了不可移动后,虽然解决了弹出层滚动时.body不滚动,但是移到旁边body内容滚动时,body还是动了,然后再移到弹出层那里,结果弹出层获取焦点有点慢,不滚动了。要按三四下才可以。超级郁闷

后来我发现我自己人在我整个弹出层上外又加了一层,其实手先触到的是那一层,而不是touchmove所以,滚动的是那一层,所以不好做。

但在某种意义上,弹出层中滚动,不会影响body的滚动。

今天同样遇到这个难题,禁止页面滑动的话,直接将 body,html 的 overflow:hidden 就行,不用加上height: 100%;不然页面在第一次载入的时候就会跳转至顶部。但是还有一个问题就是在滑动弹出层时,底层的内容页也在变化,这个问题我还不知道怎么弄。

.ovfHiden{height:100%;overflow:hidden} //左侧弹出菜单 $(".conmun").click(function(){ $('html,body').addClass('ovfHiden'); //使网页不可滚动 $(".leftNav").show(); }) $(".bgDiv").click(function(){ $('html,body').removeClass('ovfHiden'); //使网页恢复可滚 $(".leftNav").hide(); })

完美解决

共13条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
手机端弹出层弹出时,弹出层的内容滚动,同时禁止body的内容滚动
手机端的一个项目,效果和汽车之家app里汽车详解的功能一样,在做的过程中遇到了弹出层的内容滚动到底部和顶部的时候,body的内容也会随之滚动,自己也是搞了好一会,最后才解决掉,办法是: 在弹出层弹出的时候给html和body都加样式 height:100%;overflow:hidden;很多人没有设置html的样式,所以导致不起作用! 项目的效果图如下图所示: 代码: <!D...
移动端弹出层滚动时禁止body滚动
移动端弹出层滚动时禁止body滚动 相信很多写移动端的朋友会遇到这个问题,我也遇到了,之后就辛辛苦苦的在网上找解决办法,下面我大概提一下我在网站遇到的几种办法,行不行的通呢?本人就亲测了下。如果有什么不对的地方或者有好的解决办法,也请告知。 1.弹出层出现时给body添加一个css样式:height:100%;overflow:hidden;弹出层消失再去掉这个类。 测试结果:chrome手
手机端弹出层滚动导致底部滚动的问题解决
手机端弹出层滚动导致底部滚动的问题解决 问题描述: 点开弹窗时,外层html或body添加自己的class(我此处是 .stop-touching) 关闭弹窗时移除刚才的class, 上两步主要用到classList的add和remove 点开时记住外部scrollTop, 关闭时设置scrollingElement.scrollTop为刚才记下的scrollTop(我本地出现了滚动时底部正常,关...
弹出层可以滚动 禁止底层滚动
document.querySelector('.outer').addEventListener('touchmove', function (event) { $("body").scrollTop(0) },false) 监听滚动并赋值
弹出层弹出时撑大body的解决办法
弹出层弹出时撑大body的解决办法
手机端弹出层背景滚动怎么解决
手机端弹出层之后我给背景层height:100%; overflow: hidden; ,背景层还是一样滚动,怎样做才不滚动呢?求各位高手帮忙[img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/83.gif][/img]
移动端弹出层后禁止背景层body滚动实例
要点:在js动态改变css的overflow属性时body和html都要写。html部分:<body style="position: relative;"> <div id="background"></div> <div id="content"> <div class="cont"&
移动端弹出层后禁止背景底层 body滚动
移动端弹出层后禁止背景底层 body滚动
移动端弹出层弹出 body还能滚动(滚动穿透)
引用bootstrap的dialog组件,不过在移动端,dialog弹出,body还能滚动。 document.addEventListener('touchmove', function (event) { //判断条件,条件成立才阻止背景页面滚动,其他情况不会再影响到页面滚动 if ($(".modal").css('display')=="block") {
移动端js弹出层滚动的时候 body层不可滚动的解决办法
最近在做移动端网站,在点击导航栏,弹出导航列表时,出现了问题。下滑列表时底层body也跟着滚动,连查带想的折腾了两天才解决这个问题。下面主要分享一下解决办法以及关键代码。一、有的网友建议弹出层弹出时给 html 和 body 都加上“height:100%;overflow:hidden;”,然而在手机上并没有什么卵用二、结合弹出层加上“overflow-y:auto”依然不起作用三、加上touch
禁止弹框下面的内容滚动
移动端或者pc端的弹框,禁止下面内容滚动,提高用户的体验
modal 弹出层后禁止底层滚动
看到一篇不错的介绍由弹出层引发对滚动原理的讨论亲自实验的时候各种坑,都知道在web上处理很简单:html, body{ overflow: hidden; }1.这样只能解决web上的问题,移动端不管用 2.这样处理仍然会有一些页面宽度适配问题因为我用在微信公众号开发上(移动端),所以找移动端解决方案, 大部分回答是在弹出层弹出的时候禁用掉触摸事件,弹出层消失的时候再把事件加上:// 记
js 弹层下面的body禁止滚动
当弹出出现的时候,设置body的position为fixed,并设置overflow为hidden document.body.style.position = 'fixed'; document.body.style.overflow = 'hidden'; 当弹层取消 document.body.style.position = 'relative'; document.body.sty...
Android+微信 弹出层无法滚动?
一般来说,如下结构,ul高度写死,overflow:scroll,内容高度过高用过出现滚动条,在大部分设备也确实没问题,直到android+微信 原因还不太清楚,解决方式是使用js控制: var t1, t2, tch; var dom = document.querySelec
关于layer弹出层内容
代码rn$.ajax( rn type:'POST',rn url: 'hhWebsiteInfoController.do?website-getDt',rn dataType:'json',rn data:'',rn success:function(json)rn alert(1);rn var dts = json.attributes.dts;rn $("#news").empty();rn var quanju = dts;rn if(typeof(dts)!=undefined)rn for(var i=0;i";rn var b = " ";rn var d = " "+dts[i].summary+"";rn rn var c = a+b;rn rn $("#news").append(c); rn rn rn rn rn);rn rn $(document).on('click',".test2",function() rn rn layer.open(rn type: 1,rn area: ['600px', '360px'],rn shadeClose: true, //点击遮罩关闭rn content: 'quanju[dataIndex].summary'rn // ' ADSFA'rn rn rn );rn ); rn弹出层的content 显示summary属性quanju[dataIndex].summary'不好使 "+quanju[dataIndex.summary+"也不好使rn
手机弹窗 禁止body滚动
h5手机页面弹窗,弹窗内滑动,禁止body滚动。h5手机页面弹窗,弹窗内滑动,禁止body滚动
移动端如何禁止body的滚动
移动端如何禁止body的滚动1、js原生方法:document.addEventListener('touchmove', function(event) { event.preventDefault(); }, false);或者function stopScroll(e){ document.documentElement.style.overflow='hidden'; }2、jQuery/Z
移动端弹窗显示后,禁止body内容跟随弹窗滚动
对于一般大小的弹窗可以使用如下方案: 1. 阻止默认事件 缺点:该方案存在一定的兼容性,不是所有浏览器都有效。对于弹窗存在滚动的情况,也不适用。 优点:弹窗显示时,页面仍然固定在原来位置,不会回滚到顶部 //阻止弹窗滚动 function stopScroll() { // 弹出时 $('body').on('touchmove', preventDefaultFn); ...
手机端弹出层弹出后,下面禁止滑动
$("#whole").show(); $("body,html").css({ "height":"100%", "overflow":"hidden" }); 千万记得将body跟html他们同时的设置 height:100%以及overflow:hidden属性
jquery弹出层鼠标点击弹出层可浮动在屏幕滚动
jquery弹出层当鼠标点击文字或图片弹出层,弹出层浮动在屏幕上可以随浏览器上下滚动,弹出层可自动居中在页面中间
有弹出层时创建遮罩层并禁止屏幕滚动
在点击登录注册后通常要创建遮罩层,使整个屏幕只能操作登录窗口部分的内容。首先需要设置弹出框的z-index值为3,使弹出层距离用户更近。还需要创建一个div宽高占满整个屏幕,用来做遮罩层。(z-index=2)。同时设置这两个div都隐藏,当触发点击事件时再显示。 HTML代码:    <a class="navigation1-a" onclick="show_Win('registe...
pc端弹出层滚动外层也滚动问题
问题现象: 在网页上,写了一个弹出层,弹出层可以滚动,在弹出层滚动到最上方或最下方时,接着再往上(下)滚动,则底层的主体(body)页面跟着滚动。 解决: 本来是想通过滚动监听来控制,但后来发现各种阻止无效。 最后是用在弹出层出来时禁用掉body的滚动条[ $(‘body’).css(‘overflow-y’,’hidden’); ]的方式,但需要处理下body滚动条的样式。关于滚动scro
vue弹出层 +内容手风琴 简单实现
效果草图 代码: <!--固定样式弹层--> <template> <div class="e-popup"> <div class="e-popup-container"> <!--手风琴--> <div> <div class="e-accordi
jquery dialog 弹出层内容错误
弹出框时不时的弹出父页面的内容,经过测试与页面表格样式无关,忘有大神帮忙解决一下。rnrnrnrnrnrnrn
弹出层后滚动条不能滚动问题
rnrn上述代码是从右下角弹出层的js,将他放在一个模板页后,页面滚动条不能用滑轮滚动是什么原因啊,单独放到别的页面就可以滚动?
滚动条滚动中弹出层被遮住!!!
遮住的弹出层加入iframe已经可以了,为什么在拖动滚动条时又会被遮住呢,也就是在网页一屏显示时没问题,出现滚动条,拖动滚动条时就会被遮住,然后再点击层,层又会在最上面显示!rn这是js代码(我是在实现层的拖拽效果方法中加入iframe的)rnfunction dragdiv(obj)rnvar o=document.getElementById(obj);//alert(o.offsetHeight);rnif(o!=null)new Draggable(o);o.innerHTML+=" "rnrn这是cs文件中引用jsrn ScriptManager.RegisterStartupScript(UpdatePanel1, this.GetType(), "lvv", "dragdiv('" + menu2.ClientID + "')", true);rn
获取弹出层中点击的内容?
现在有1个按钮,1个文体框,点击按钮中弹出层,层中放置了一个GridView,现在想获取弹出层中点击第一列的某一行的内容时,把所点击行的列的内容赋给一个label,然后层消失,如何才能达到这个效果?谢谢大家!
移动端弹出层时背景可滚动问题
移动端弹出层时背景可滚动问题: 解决办法: 弹出时给html标签添加一个类: .noscroll{ position: fixed; left: 0; top: 0; width: 100%; } 关闭时移除给类...
怎样禁止在滚动文本框里输入内容?
怎样禁止在滚动文本框里输入内容?只能显示初始化的文本?
如何禁止panel滚动时绘制内容?
在panel里面有很多控件(注意,是很多),拖动滚动条的时候,panel内容跟着流滚动,但控件刷新的时候一闪一闪的难看到死!有没有什么办法可以禁止其绘制控件?rn在ListView里面,有诸如BeginUpdate和EndUpdate之类的方法可以禁止绘制界面,可panel里面怎么也找不到这样的东西。我在想——会不会是panel做为容器会和其它控件有所不同?
js禁止和启用移动端页面内容滚动
直接上代码: this.onTouchMove(true);//禁用this.onTouchMove(false);//启用 onTouchMove(inFlag) { if (inFlag) { document.addEventListener('touchmove', this.onHandler, false); } else { documen
弹出层禁止页面滚动
在做移动端遮罩层时,发现页面可以上下滚动,踩了N个坑之后,总算是解决了这个问题。禁止滚动 给body设置宽高都是100%,固定在左上角,溢出隐藏的样式。 var body = document.body; body.style.cssText = 'width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: hi...
弹出层完美禁止页面滚动
页面中经常会遇到弹出层的部件,当弹出层激活时覆盖整个页面,且背景部分不能滚动。实现起来有以下要点: 弹出层position设置为fixed,四个定位锚点均设为0; 激活弹出层时给html和body设置overflow: hidden;; 以下是实践: codepen 为了让彻底禁止滚动,还可以在mousewheel和touchmove...
layer 手机端mobile的弹出层如何获取content的内容
实现代码:layer.open({ title: [ '添加标签', 'background-color:#1b8cec; color:#fff;' ] ,anim: 'up' ,content: '' ,btn:
禁止弹窗后body滚动(jQuery实现)
禁止弹窗后body滚动jQuery实现 demo的源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=de...
动态创建弹出层并且弹出层额内容样式可自定义
不知大家在开发中是否遇到这样的需求,在同一项目中需要弹出风格大致一致但是内容及样式有极大更改的大弹出层。引用插件太麻烦且样式和内容不是那么可控。今天我实现了一个动态创建弹出层的效果大概是这样的,在点击需要弹出层的按钮后动态创建一个弹出层,其样式和内容均可写在另外一个HTML页面通过AJAX请求得到,弹出层在页面居中。 先贴上jq源码,第一个参数代表请求的地址(也就是你写的html的地址),第二个
移动端禁止body内容上下滑动
直接给body设置这两个属性就可以了。 body { height: 100%; overflow: hidden; } 如果还是不行做如下设置: <body ontouchmove="return false;"> .... </body> ...
layui使用弹出层 关闭后弹层的内容又显示出来
原因:JQUERY 冲突 你可能引入了某些插件,插件需要引入jquery,而你又引用了layui的jquery,所以就冲突了 解决方法:用layui自带的jquery。
winform内容滚动的问题
请问下大家在winform里面怎么让一部分区域中的内容不间断滚动??rnrn请各位高手解答一下~ 多谢!
TextView滚动显示内容
android:id="@+id/long_screen_shot_mytextview"                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:gravity="center"     
相关热词 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池 c#5.0 安装程序 c# 分页算法