Question

有没有办法在滚动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

谢谢！

Answer 1

如果您使用的是Cordova 1.7，只需打开 Cordova.plist 文件，然后将 UIWebViewBounce 键设置为否。

Answer 2

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

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

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

Answer 3

根据您的评论，您使用的代码是完全禁用滚动。如果你想滚动，但没有反弹效果，尝试这样的事情：

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。让我知道它是否适合你。

Answer 4

这将帮助您将.scroll类放在您希望仍然滚动的元素上。

发生的事情是默认情况下禁用所有触摸移动。如果要滚动的元素上有.scroll类，则它将gate设置为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
  })  
})

Answer 5

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

这是我做的 -

#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;

禁用ipad网络应用中的垂直反弹效果

5 个答案: