移动端禁止遮罩层以下屏幕滑动

var ruleTxt = $(".wanfan .rule .rule-txt");
var ruleTxtBottom = $(".wanfan .rule .rule-txt .rule-txt-bottom");
var flag = ‘‘;
$(".wanfan .rule .rule-btn").on(‘click‘,function(){
var h=window.screen.height;
ruleTxt.css({‘width‘:‘100%‘,‘left‘:‘0px‘});
ruleTxtBottom.css({‘height‘:h/2});
$(".rule .rule-txt").animate({‘bottom‘:‘0px‘});
flag = 1;

});
document.addEventListener(‘touchmove‘, function (event) {    //监听滚动事件
if(flag==1){                            //判断是遮罩显示时执行,禁止滚屏
event.preventDefault();                   //最关键的一句,禁止浏览器默认行为
}
});

$(".wanfan .rule .rule-txt-top span").click(function(){
$(".rule .rule-txt").animate({‘bottom‘:‘-100%‘});
flag = 0;
});

发现连遮罩层都不能滑动了,只能用到选择器;

http://www.cnblogs.com/licf/p/4691556.html

时间: 2024-11-07 00:29:48

移动端禁止遮罩层以下屏幕滑动的相关文章

禁止遮罩层以下屏幕滑动

相信大家在做移动端开发的时候会经常遇到这种场景,需要适时的弹出遮罩(有时为了突出还会在外面加上蒙层),弹窗出现以后,为了追求良好的用户体验,遮罩以下的屏幕是禁止滑动的.在网上找了很多资料,大体就这两种做法,但都有不完善的地方.加上自己的思考和总结,想到一个办法,应该可以解决你的问题. a)大众型 一般,大家想到的都是给body或者html添加overflow:hidden样式,当然height要设置成100%.这样在大多数机型上是可以的,但有个别的就是不起作用,我也不知道为什么(求知道的大神告知

禁止遮罩层以下屏幕滑动----正解

相信大家在做移动端开发的时候会经常遇到这种场景,需要适时的弹出遮罩(有时为了突出还会在外面加上蒙层),弹窗出现以后,为了追求良好的用户体验,遮罩以下的屏幕是禁止滑动的.在网上找了很多资料,大体就这两种做法,但都有不完善的地方.加上自己的思考和总结,想到一个办法,应该可以解决你的问题. a)大众型 一般,大家想到的都是给body或者html添加overflow:hidden样式,当然height要设置成100%.这样在大多数机型上是可以的,但有个别的就是不起作用,我也不知道为什么(求知道的大神告知

解决移动端遮罩层无法覆盖全部页面问题

今天在做移动端项目的时候遇到遮罩层效果,按照以往的PC端我直接给同级遮罩层100%  给完之后测试看似完美但... 这就尴尬了.... 之后查阅了相关资料得知这里有个方法可以解决这个问题那就是“禁止全局滚动” 里面用的touch事件可参考 HTML5移动端触摸事件 document.addEventListaner('touchmove',stopTouchMove,false); //当手在屏幕上移动的时候执行stopTouchMove函数(阻止默认事件) //这个可以用在当遮罩层弹出的话执行

弹出遮罩层后禁止滚动效果

弹出遮罩层后,手指在手机上上下滑动 遮罩层下的页面出现滑动.下面代码解决这个问题 (1)触摸后不产生事件 //遮罩层禁止滚动 $('.searbox_mask_byInteg').bind("touchmove", function (e) { e.preventDefault(); }); (2)body不出现滚动条 $("body,.main").height($(window).height()).css({ "overflow-y": &

移动端遮罩层,内容大小改变动态大小

遮罩层的实现 .mask{ position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,.3); z-index:1000; display:none; } 解释:如果想在某个区域设置遮罩层,就把.mask放在某个区域的div下:根据自己的需求设置宽高,定位也要适当删减修改: 层级就根据自己需求设置大小: 本人遇到的情况是数据不固定,遮罩层大小不固定: 数据多的情况下遮罩层正常遮罩,如果没数据或

清除移动端网站点击a标签时闪现的边框或遮罩层(CSS)

  在移动端网站,当你点击加了a标签的文字或图片时,该元素的周围会闪现一个蓝色的边框,在微信上的网站就是如此:而有的浏览器会闪现一个半透明遮罩层,比如移动端的Chrome浏览器,其实这些特效无非就是为了告诉用户已点击了该元素,提升用户体验,但有的时候你会觉得这些特效看起来很别扭,就想着清除它,其实这很简单,只要加上一句CSS就行了. 清除所有a标签在点击时出现的特效: a{ -webkit-tap-highlight-color:rgba(255,0,0,0);}

弹出层带遮罩显示在屏幕正中间

最近项目中用到了遮罩层,在这里总结下以备下次使用. 首先,遮罩应全屏,同时需要兼容多种浏览器,需要设置div的样式为: 复制代码 1 position:absolute; 2 top:0%; /**遮罩全屏top,left都为0,width,height为100%**/ 3 left:0%; 4 width:100%; 5 height:100%; 6 filter:alpha(opacity=50); 7 opacity: 0.5; 8 -moz-opacity:0.5; 9 -khtml-o

js遮罩层以及移动端的上拉框

今天发一个之前写的移动端的项目,主要是讲一下遮罩层的应用,以及顺带提一下移动开发的一些事情.首先按钮点击弹出遮罩层这个大家很熟悉了,这里还是给大家提供一份代码,跟通用的没太大区别,主要讲一下方法: $(function(){ var jiage=$(".jiage"),xingji=$(".xingji"),fj=$(".fj li"),qd=$(".qd");jiage.click(function(){tanchu();x

跟随屏幕滚动层、遮罩层、获取Div相对定位、整个屏幕、html文档的jquery基本操作

一.层跟随屏幕滚动 <div style="width:120px;height:120px;border:1px solid red; position:absolute; left:800px; top:100px; z-index:1001;" id="AdminUserStateDiv">                </div>        <div class="div1">层1</div