堆栈内存溢出
  繁体   English   中英

禁用iPhone Web应用程序中的滚动？

[英]Disable scrolling in an iPhone web application?

 原文  2010-05-23 01:08:53  3   9    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(); });

似乎不起作用。

9 个解决方案

解决方案1
 56  2010-05-23 02:45:31

更改为touchstart事件而不是touchmove 。 在One Finger Events下，它表示在平移期间没有发送任何事件，因此touchmove可能为时已晚。

我将监听器添加到文档中，而不是正文。

例： 

document.ontouchstart = function(e){ 
    e.preventDefault(); 
}

解决方案2
 16  2014-11-10 22:07:46

document.addEventListener('touchstart', function (e) {
    e.preventDefault();
});

不要使用ontouchmove属性来注册事件处理程序，因为您正在运行时可能会覆盖现有的事件处理程序。 请改用addEventListener （请参阅MDN页面上有关IE的说明）。

请注意，防止window或document上的touchstart事件的默认值将禁用下降区域的滚动。

为了防止文档的滚动而将其他所有事件的完整防止默认第一touchmove以下事件touchstart ： 

var firstMove;

window.addEventListener('touchstart', function (e) {
    firstMove = true;
});

window.addEventListener('touchmove', function (e) {
    if (firstMove) {
        e.preventDefault();

        firstMove = false;
    }
});

这样做的原因是移动Safari正在使用第一个移动来确定文档的正文是否正在滚动。 我在设计更复杂的解决方案时意识到了这一点。

如果这将停止工作，更复杂的解决方案是检查touchTarget元素及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正在使用第一次触摸移动来确定文档正在滚动还是元素（或任何一个目标元素父项）并坚持这一决定。

解决方案3
 13  2012-05-01 15:13:03

如果你使用jquery 1.7+，这很好用： 

$("donotscrollme").on("touchmove", false);

解决方案4
 12  2011-11-17 22:28:49

这应该工作。 顶部或底部没有灰色区域:) 

<script type="text/javascript">
   function blockMove() {
      event.preventDefault() ;
}
</script>

<body ontouchmove="blockMove()">

但是这也会禁用任何可滚动区域。 如果您想保留可滚动区域并仍然删除顶部和底部的橡皮筋效果，请参阅此处： https ： //github.com/joelambert/ScrollFix 。

解决方案5
 10  2013-06-13 14:19:39

禁用： 

document.ontouchstart = function(e){ e.preventDefault(); }

启用： 

document.ontouchstart = function(e){ return true; }

解决方案6
 10 已采纳  2015-06-01 16:37:14

'self.webView.scrollView.bounces = NO;'

只需在应用程序的mainViewController.m文件的“viewDidLoad”中添加这一行。 你可以在Xcode中打开它并添加它。

这应该使页面没有任何橡皮筋反弹仍然在应用程序视图中启用滚动。

解决方案7
 4  2010-10-19 21:24:03

必须从主屏幕启动该页面才能使元标记生效。

解决方案8
 1  2013-05-30 13:03:05

document.ontouchmove = function(e){ 
    e.preventDefault(); 
}

实际上是我发现的最佳选择它允许你仍然能够点击输入字段以及使用jQuery UI拖动来拖动东西，但它会阻止页面滚动。

解决方案9
 0  2017-09-20 21:02:13

我尝试了上面的答案，特别是Gajus，但都没有。 最后我找到了下面的答案解决问题，只有主体不滚动，但我的网络应用程序内的其他滚动部分都工作正常。 只需为您的身体设置固定位置： 

body {

height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 禁用在iPhone Web应用程序中移动但保留滚动？ iPhone Web App - 禁用正文滚动但允许在正文中的所有元素 禁用滚动网页iPad 在我的Web应用程序中滚动 如何在iPhone的HTML中禁用水平滚动 iPhone Web App禁用缓存 在iPhone / iPad的BUT中启用/禁用滚动启用网站滚动 使用 iScroll 在 iOS 中的 web 应用程序中滚动 预加载网页时禁用滚动 如何禁用，启用然后再次禁用使用e.preventDefault（）;在ipad / iphone中滚动？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM