84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
怎么写javascript和html才能禁止网页的上下,左右滚动啊,是在手机浏览器上,onmousewheel=“return false”在PC上有用,但在手机上没用,,用jquery mobile写可以吗?。。急求~~来个实际操作过的大神啊~~
认证高级PHP讲师
html>head
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes" />
viewport可以控制用户在手机上两个手指缩放的行为范围,这行代码的意思是宽度为设备宽度,初始缩放为1,最大缩放也是1倍,用户不能缩放。
apple这行是告诉iOS这是个应用,就不会像网页一样可以滚动到顶部回弹一下的效果,就是可以看到苹果默认背景灰色部分的那个效果。如果你不需要可以删掉这行。
这里有个算是例子吧,一个简单的时钟,是离线的http://www.tychio.net/opportunity/
你找的是這個嗎?
CSS
overflow: hidden
一种方法:
html头部添加
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
然后将页面body的高度设为window的高度
$("body").height( $(window).height() );
其他方法
页面高度超过设备可见高度时,阻止掉touchmove事件。
document.body.addEventListener('touchmove', function (event) { event.preventDefault(); }, false);
我们都用这个overflow:hidden
加监听事件touchmove,touchstart
头部:
CSS:
html,body{height:100%;overflow:hidden;}
document.addEventListener('touchmove', function(event) { if(event.target.type == 'range') return; event.preventDefault(); })
有个问题,就是使用
document.body.addEventListener('touchmove', function (event) { event.preventDefault(); }, false); 怎么取消?就算使用了移除事件,或者返回 真,都没办法再让页面滚动...有点郁闷.- - 都怪自己太笨...想了下,在阻止默认事件里面加个多条件
javascriptdocument.addEventListener('touchmove', function(event) { //判断条件,条件成立才阻止背景页面滚动,其他情况不会再影响到页面滚动 if(!$(".mask-photo").is(":hidden")){ event.preventDefault(); } })
javascript
document.addEventListener('touchmove', function(event) { //判断条件,条件成立才阻止背景页面滚动,其他情况不会再影响到页面滚动 if(!$(".mask-photo").is(":hidden")){ event.preventDefault(); } })
document.body.addEventListener('touchmove'......
为什么要给body呢?给弹出层就好了
用$("body").bind("touchmove",function(event){event.preventDefault;//code});取消了body的拖动事件。
恢复这个拖动事件只要$("body").unbind("touchmove");
非常实用。
html>head
viewport可以控制用户在手机上两个手指缩放的
行为范围,这行代码的意思是宽度为设备宽度,初始缩放为1,最大缩放也是1倍,用户不能缩放。apple这行是告诉iOS这是个应用,就不会像网页一样可以滚动到顶部回弹一下的效果,就是可以看到苹果默认背景灰色部分的那个效果。如果你不需要可以删掉这行。
这里有个算是例子吧,一个简单的时钟,是离线的http://www.tychio.net/opportunity/
你找的是這個嗎?
CSS
overflow: hidden
一种方法:
html头部添加
然后将页面body的高度设为window的高度
其他方法
页面高度超过设备可见高度时,阻止掉touchmove事件。
我们都用这个overflow:hidden
加监听事件touchmove,touchstart
头部:
CSS:
有个问题,就是使用
document.body.addEventListener('touchmove'......
为什么要给body呢?给弹出层就好了
用$("body").bind("touchmove",function(event){event.preventDefault;//code});取消了body的拖动事件。
恢复这个拖动事件只要$("body").unbind("touchmove");
非常实用。