Ste*_*all 57 javascript iphone scroll
有没有办法在iPhone网络应用程序中完全禁用网页滚动？我在谷歌上试过很多东西,但似乎都没有用.
这是我当前的标题设置:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
似乎不起作用.
dra*_*ard 56
更改为touchstart事件而不是touchmove.在One Finger Events下,它表示在平移期间没有发送任何事件,因此touchmove可能为时已晚.
我将监听器添加到文档中,而不是正文.
例:
document.ontouchstart = function(e){
e.preventDefault();
}
Gaj*_*jus 16
document.addEventListener('touchstart', function (e) {
e.preventDefault();
});
不要使用该ontouchmove属性来注册事件处理程序,因为您正在运行时可能会覆盖现有的事件处理程序.请改用addEventListener(请参阅MDN页面上有关IE的说明).
注意防止touchstart事件的默认值window或document将禁用下降区域的滚动.
要防止滚动文档但保留所有其他事件,请防止以下第一个touchmove事件的默认值touchstart:
var firstMove;
window.addEventListener('touchstart', function (e) {
firstMove = true;
});
window.addEventListener('touchmove', function (e) {
if (firstMove) {
e.preventDefault();
firstMove = false;
}
});
这样做的原因是移动Safari正在使用第一步来确定文档的正文是否正在滚动.我在设计更复杂的解决方案时意识到了这一点.
如果这将永远停止工作,更复杂的解决方案是检查touchTarget元素及其父元素并制作可以滚动到的方向图.然后使用第一个touchmove事件来检测滚动方向,看看它是否要滚动文档或目标元素(或任何一个目标元素父项):
var touchTarget,
touchScreenX,
touchScreenY,
conditionParentUntilTrue,
disableScroll,
scrollMap;
conditionParentUntilTrue = function (element, condition) {
var outcome;
if (element === document.body) {
return false;
}
outcome = condition(element);
if (outcome) {
return true;
} else {
return conditionParentUntilTrue(element.parentNode, condition);
}
};
window.addEventListener('touchstart', function (e) {
touchTarget = e.targetTouches[0].target;
// a boolean map indicating if the element (or either of element parents, excluding the document.body) can be scrolled to the X direction.
scrollMap = {}
scrollMap.left = conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollLeft > 0;
});
scrollMap.top = conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollTop > 0;
});
scrollMap.right = conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollWidth > element.clientWidth &&
element.scrollWidth - element.clientWidth > element.scrollLeft;
});
scrollMap.bottom =conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollHeight > element.clientHeight &&
element.scrollHeight - element.clientHeight > element.scrollTop;
});
touchScreenX = e.targetTouches[0].screenX;
touchScreenY = e.targetTouches[0].screenY;
disableScroll = false;
});
window.addEventListener('touchmove', function (e) {
var moveScreenX,
moveScreenY;
if (disableScroll) {
e.preventDefault();
return;
}
moveScreenX = e.targetTouches[0].screenX;
moveScreenY = e.targetTouches[0].screenY;
if (
moveScreenX > touchScreenX && scrollMap.left ||
moveScreenY < touchScreenY && scrollMap.bottom ||
moveScreenX < touchScreenX && scrollMap.right ||
moveScreenY > touchScreenY && scrollMap.top
) {
// You are scrolling either the element or its parent.
// This will not affect document.body scroll.
} else {
// This will affect document.body scroll.
e.preventDefault();
disableScroll = true;
}
});
这样做的原因是移动Safari正在使用第一次触摸移动来确定文档正在滚动还是元素(或任何一个目标元素父项)并坚持这一决定.
Rob*_*uer 13
如果你使用jquery 1.7+,这很好用:
$("donotscrollme").on("touchmove", false);
kal*_*azy 12
这应该工作.顶部或底部没有灰色区域:)
<script type="text/javascript">
function blockMove() {
event.preventDefault() ;
}
</script>
<body ontouchmove="blockMove()">
但是这也会禁用任何可滚动区域.如果您想保留可滚动区域并仍然删除顶部和底部的橡皮筋效果,请参阅此处:https://github.com/joelambert/ScrollFix.
Bry*_*ira 10
禁用:
document.ontouchstart = function(e){ e.preventDefault(); }
启用:
document.ontouchstart = function(e){ return true; }
Cha*_*ait 10
'self.webView.scrollView.bounces = NO;'
只需在应用程序的mainViewController.m文件的"viewDidLoad"中添加这一行.你可以在Xcode中打开它并添加它.
这应该使页面没有任何橡皮筋反弹仍然在应用程序视图中启用滚动.
| 归档时间： |
|
| 查看次数： |
115267 次 |
| 最近记录： |