在 ipad 网络应用程序中禁用垂直反弹效果答案

【问题标题】：Disable vertical bounce effect in an ipad web app在 ipad 网络应用程序中禁用垂直反弹效果
【发布时间】：2012-06-01 11:15:12
【问题描述】：

有没有办法在滚动 div 中禁用反弹效果？

到目前为止，我已经尝试了这些方法，但都没有奏效。请帮忙！

How to disable vertical bounce/scroll on iPhone in a mobile web application

Can't disable bounce with UIScrollView and pagingEnabled=YES

ipad safari: disable scrolling, and bounce effect?

Disable UITableView vertical bounces when scrolling

和

http://www.iphonedevsdk.com/forum/iphone-sdk-development/996-turn-off-scrolling-bounces-uiwebview.html

谢谢！

【问题讨论】：

对于任何解决方案，您是否在错误控制台中收到任何错误？
好的。您的一些链接提到了 UIScrollView 或 UITableView，所以如果您正在制作 HTML 页面，这些对您没有帮助。您能否发布您使用的其中一种 JavaScript 技术的实现？
这是我使用过的方法之一 - document.ontouchmove = function(event) { event.preventDefault(); } var myDiv =document.getElementById("scrollableDiv"); myDiv.ontouchmove = function(event) { event.stopPropagation(); }
我已经使用 PhoneGap 将这个 Web 应用程序包装在 XCode 中。也试过 myScrollView.bounces=NO;和 [(UIScrollView*)[webview.subviews objectAtIndex:0] setAllowsRubberBanding:NO];在这里，我需要 div 滚动但不反弹。不确定是否可行。
我发布的链接看起来也有PhoneGap解决方案。您可能想尝试一下。

标签： javascript objective-c ios cordova mobile-safari

【解决方案1】：

打开 phoneGap 项目的 config.xml 文件并将 UIWebViewBounce 从默认的 true 更改为 false：

    <preference name="UIWebViewBounce" value="false" />

无法想象为什么默认为真...

【讨论】：

如果你有更高版本的 phonegap/cordova，我相信新的偏好是至少这对我来说适用于 cordova 2.7.0
rustster 的最后一条评论在科尔多瓦 3.3 中非常适合我，我的生命得救了。谢谢。

【解决方案2】：

这将帮助您将 .scroll 类放置在您希望仍具有滚动功能的元素上。

默认情况下，所有触摸动作都被禁用。如果您希望滚动的元素上有 .scroll 类，则它将门设置为 true 以允许它通过。

在触摸结束时，您将门重置为 false。

这适用于 IOS5 和 6，并且可以在 Chrome 和 Safari 中运行

看@这篇文章来扩展它
How to prevent page scrolling when scrolling a DIV element?

唯一需要注意的是，如果您过度滚动可滚动元素，弹性效果允许滚动向上传递，而滚动设置为 true。手动设置滚动位置会被可怕的反弹效果覆盖。
我敢打赌，那些 Apple friggers 有一个原生的滚动实现，在设定的超时时间内运行，每一步都硬连线。

因此，如果你滚动到 -20，我认为它会将每个步骤硬连线到一个不检查的循环中它在哪里。依次滚动到 -20 -19 -18 等。

我们必须想办法解决这个问题！（其实把它打出来加载我有个主意！）

$(function(){
  var scroll = false
  var scroll_element;
  $('body').on('touchmove',function(e){
      if(!scroll){
      e.preventDefault()
      }
  })
  $('body').on('touchend',function(e){
      scroll = false
  })  
  $('.scroll').on('touchstart',function(e){
      scroll_element = this
      scroll = true
  })  
})

【讨论】：

【解决方案3】：

如果您使用的是 Cordova 1.7，只需打开 Cordova.plist 文件并将密钥 UIWebViewBounce 设置为 NO。

【讨论】：

幸好这家伙找到了更好的解决方案，谢谢！

【解决方案4】：

我知道这可能不是最好的方法，但它确实有效。

这就是我所做的 -

#scrollableDiv {
    position:fixed;
    top:50px;
    width:300px;
    height:500px;
    word-wrap: break-word;
    overflow-y: scroll; 
}

document.getElementById("scrollableDiv").innerHTML = longText;
document.getElementById("scrollableDiv").scrollTop = 0;

【讨论】：

为避免水平弹跳，请确保内容不会溢出。

【解决方案5】：

根据您的评论，您使用的代码完全是禁用滚动。如果您想要滚动，但没有反弹效果，请尝试以下操作：

var xStart, yStart = 0;

document.getElementById("scrollableDiv").addEventListener('touchstart',function(e) {
    xStart = e.touches[0].screenX;
    yStart = e.touches[0].screenY;
});

document.getElementById("scrollableDiv").addEventListener('touchmove',function(e) {
    var xMovement = Math.abs(e.touches[0].screenX - xStart);
    var yMovement = Math.abs(e.touches[0].screenY - yStart);
    if((yMovement * 3) > xMovement) {
        e.preventDefault();
    }
});

我找到了这个解决方案here。让我知道它是否适合你。

【讨论】：

谢谢，但这会禁用弹跳和滚动。
我刚刚编辑了代码。我应该在这两个地方都使用document.getElementById("scrollableDiv").addEventListener(... 而不是document.addEventListener(...。这可能是它不起作用的原因。