jQuery 防止 iOS safari 移动网页窗口,以便发生拖动事件
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17068026/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent iOS safari from moving web-page window so drag event can happen
提问by Django Johnson
I am using Pep.js for kinetic drag on multi-touch, but my drag events are not being registered because when I try to drag an object in the safari, on iOS, window the window itself moves and follows my drag.
我正在使用 Pep.js 在多点触控上进行动态拖动,但是我的拖动事件没有被注册,因为当我尝试在 Safari 中拖动对象时,在 iOS 上,窗口本身会移动并跟随我的拖动。
How can I prevent the browser window from following my drag so that the <div>
in my webpage can be dragged?
如何防止浏览器窗口跟随我的拖动,以便<div>
可以拖动我的网页中的 ?
Here is the webpage in question: http://goo.gl/TsHgh. Click on the link and a <div>
slides in, it is that div that is draggable. It works on desktop browsers, but can not be dragged on multi-touch because safari moves the window along with my drag.
这是有问题的网页:http: //goo.gl/TsHgh。单击链接并<div>
滑入,是可拖动的 div。它适用于桌面浏览器,但不能在多点触控上拖动,因为 safari 会随着我的拖动而移动窗口。
回答by Nick Treadway
I have found this solution while working with the #ionicframework
我在使用#ionicframework时找到了这个解决方案
CSS:
CSS:
html, body {
overflow:hidden;
}
JS:
JS:
$(window).bind(
'touchmove',
function(e) {
e.preventDefault();
}
);
回答by Django Johnson
Your animation is what is causing the issue.
您的动画是导致问题的原因。
Well, the class your animation is being applied to.
那么,你的动画正在应用到的类。
Remove the class after the animation is done.
动画完成后删除类。
setTimeout(function(){
$('#tabViewWindow').removeClass('animated').removeClass('bounceInRight');
}, 1200);
Also, to disable scrolling on the window:
此外,要禁用窗口滚动:
html, body{
overflow:hidden;
}
回答by Ruben Nagoga
Try to add
尝试添加
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
To head tag in your html
在你的 html 中添加头标签