javascript 在 ipad 网络应用程序中禁用垂直反弹效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10761746/
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
Disable vertical bounce effect in an ipad web app
提问by imhere
Is there a way to disable the bounce effect in a scrolling div?
有没有办法在滚动 div 中禁用反弹效果？
So far I have tried these things but none worked. Please help!
到目前为止，我已经尝试过这些东西，但都没有奏效。请帮忙！
How to disable vertical bounce/scroll on iPhone in a mobile web application
如何在移动 Web 应用程序中禁用 iPhone 上的垂直弹跳/滚动
Can't disable bounce with UIScrollView and pagingEnabled=YES
无法使用 UIScrollView 和 pagingEnabled=YES 禁用弹跳
ipad safari: disable scrolling, and bounce effect?
Disable UITableView vertical bounces when scrolling
And
和
Thanks!
谢谢！
采纳答案by imhere
I know this may not be the best way but it works.
我知道这可能不是最好的方法，但它有效。
Here is what I did -
这是我所做的 -
#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;
回答by perfect_element
If you're using Cordova 1.7, just open the Cordova.plistfile and set the key UIWebViewBounceto NO.
如果您使用的是 Cordova 1.7，只需打开Cordova.plist文件并将键UIWebViewBounce设置为NO。
回答by JOM
Open your phoneGap project's config.xmlfile and change UIWebViewBounce from default true to false:
打开 phoneGap 项目的config.xml文件并将 UIWebViewBounce 从默认 true 更改为 false：
<preference name="UIWebViewBounce" value="false" />
Can't imagine why the default is true...
无法想象为什么默认值是真的...
回答by woz
Based on your comment, the code your are using is the disable scrolling altogether. If you want scrolling, but without the bounce effect, try something like this:
根据您的评论，您使用的代码是完全禁用滚动。如果您想要滚动，但没有反弹效果，请尝试以下操作：
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();
}
});
I found this solution here. Let me know if it works for you.
我在这里找到了这个解决方案。请让我知道这对你有没有用。
回答by James
This will help you out place the .scroll class on the element you wish to still have scrolling.
这将帮助您将 .scroll 类放在您希望仍然滚动的元素上。
Whats happening is all touch moves are disabled by default. If the element you wish to scroll has the .scroll class on it then it sets the gate to true to allow it to pass.
发生的事情是默认情况下禁用所有触摸移动。如果您希望滚动的元素上有 .scroll 类，那么它将门设置为 true 以允许它通过。
On touch end you reset the gate to false.
在触摸端，您将门重置为 false。
This works on IOS5 and 6 and could work in Chrome and Safari
Look @ this post to extend it
How to prevent page scrolling when scrolling a DIV element?
这适用于 IOS5 和 6，并且可以在 Chrome 和 Safari
Look@这篇文章中工作以扩展它
如何在滚动 DIV 元素时防止页面滚动？
The only catch to this is that if you over scroll the scrollable element the elastic effect allows the scroll to be passed up the tree while scroll is set to true. Manually setting the scroll position gets overridden by the dreaded bounce effect.
I bet those Apple friggers have a native implementation of scroll running in a set time out with each step hard wired in.
So if you scroll to -20, I think it hard wires each step into a loop not checking where it was. Scrolling to -20 -19 -18 etc in sequence.
We must think of a way around this! ( in fact typing it out load I have an idea! )
唯一的问题是，如果您过度滚动可滚动元素，则弹性效果允许在滚动设置为 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
})
})
