我正在开发一个基于浏览器的应用程序，目前我正在为ipad safari浏览器开发和设计样式。
我在ipad上寻找两件事：如何禁用不需要它的页面的垂直滚动？如何禁用弹性反弹效果？
此答案不再适用，除非您正在开发一个非常旧的iOS设备...请参阅其他解决方案
2011答案：对于在iOS Safari中运行的web / html应用程序，你需要类似的东西
document.ontouchmove = function(event){
event.preventDefault();
}
对于iOS 5，您可能需要考虑以下因素：document.ontouchmove and scrolling on iOS 5
2014年9月更新：可以在这里找到更彻底的方法：https://github.com/luster-io/prevent-overscroll。为此以及大量有用的webapp建议，请参阅 http://www.luster.io/blog/9-29-14-mobile-web-checklist.html
2016年3月更新：最后一个链接不再有效 - 请参阅https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist.html获取存档版本。谢谢@falsarella指出这一点。
对于那些使用MyScript Web应用程序并且正在努力进行身体滚动/拖动（在iPad和平板电脑上）而不是实际编写的人：
<body touch-action="none" unresolved>
这为我解决了这个问题。
您可以使用js来阻止滚动：
let body = document.body;
let hideScroll = function(e) {
e.preventDefault();
};
function toggleScroll (bool) {
if (bool === true) {
body.addEventListener("touchmove", hideScroll);
} else {
body.removeEventListener("touchmove", hideScroll);
}
}
而不仅仅是在打开/关闭模态时运行/停止qazxsw poi func。
喜欢这个toggleScroll
（这仅适用于iOS，在Android上无法正常工作）
试试这个切换toggleScroll(true) / toggleScroll(false)风格的JS解决方案。这里的诀窍是这种风格关闭，移动Safari进入普通滚动并防止过度反弹 - 唉，它无法取消持续的阻力。这个复杂的解决方案还跟踪webkitOverflowScrolling在顶部反弹使onscroll负面可能被跟踪。此解决方案在iOS 12.1.1上进行了测试，并且有一个缺点：加速滚动单次过度弹跳仍然会发生，因为重置样式可能不会立即取消它。
scrollTop经过测试的解决方案适用于iOS 12.x.
这是我遇到的问题：
function preventScrollVerticalBounceEffect(container) {
setTouchScroll(true) //!: enable before the first scroll attempt
container.addEventListener("touchstart", onTouchStart)
container.addEventListener("touchmove", onTouch, { passive: false })
container.addEventListener("touchend", onTouchEnd)
container.addEventListener("scroll", onScroll)
function isTouchScroll() {
return !!container.style.webkitOverflowScrolling
}
let prevScrollTop = 0, prevTouchY, opid = 0
function setTouchScroll(on) {
container.style.webkitOverflowScrolling = on ? "touch" : null
//Hint: auto-enabling after a small pause makes the start
// smoothly accelerated as required. After the pause the
// scroll position is settled, and there is no delta to
// make over-bounce by dragging the finger. But still,
// accelerated content makes short single over-bounce
// as acceleration may not be off instantly.
const xopid = ++opid
!on && setTimeout(() => (xopid === opid) && setTouchScroll(true), 250)
if(!on && container.scrollTop < 16)
container.scrollTop = 0
prevScrollTop = container.scrollTop
}
function isBounceOverTop() {
const dY = container.scrollTop - prevScrollTop
return dY < 0 && container.scrollTop < 16
}
function isBounceOverBottom(touchY) {
const dY = touchY - prevTouchY
//Hint: trying to bounce over the bottom, the finger moves
// up the screen, thus Y becomes smaller. We prevent this.
return dY < 0 && container.scrollHeight - 16 <=
container.scrollTop + container.offsetHeight
}
function onTouchStart(e) {
prevTouchY = e.touches[0].pageY
}
function onTouch(e) {
const touchY = e.touches[0].pageY
if(isBounceOverBottom(touchY)) {
if(isTouchScroll())
setTouchScroll(false)
e.preventDefault()
}
prevTouchY = touchY
}
function onTouchEnd() {
prevTouchY = undefined
}
function onScroll() {
if(isTouchScroll() && isBounceOverTop()) {
setTouchScroll(false)
}
}
}
当我滚动我的画廊时，身体总是滚动（人类滑动不是真正的水平），这使我的画廊无用。
这是我在画廊开始滚动时所做的
<body> <!-- the whole body can be scroll vertically -->
<article>
<my_gallery> <!-- some picture gallery, can be scroll horizontally -->
</my_gallery>
</article>
</body>
当我的画廊结束滚动时......
var html=jQuery('html');
html.css('overflow-y', 'hidden');
//above code works on mobile Chrome/Edge/Firefox
document.ontouchmove=function(e){e.preventDefault();} //Add this only for mobile Safari
希望这有助于〜
代码到删除ipad safari：禁用滚动和反弹效果
var html=jQuery('html');
html.css('overflow-y', 'scroll');
document.ontouchmove=function(e){return true;}
如果你在文档中有canvas标签，有时它会影响Canvas中对象的可用性（例如：对象的移动）;所以添加下面的代码来修复它。
document.addEventListener("touchmove", function (e) {
e.preventDefault();
}, { passive: false });
与愤怒的奇异果类似，我使用高度而不是位置来使用它：
document.getElementById("canvasId").addEventListener("touchmove", function (e) {
e.stopPropagation();
}, { passive: false });
您还可以将body / html的位置更改为fixed：
body,
html {
position: fixed;
}
要防止在现代移动浏览器上滚动，您需要添加被动：false。在找到这个解决方案之前，我一直在拉我的头发。我只在互联网上的另一个地方发现了这一点。
function preventDefault(e){
e.preventDefault();
}
function disableScroll(){
document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
document.body.removeEventListener('touchmove', preventDefault);
}您可以使用此jQuery代码段执行此操作：
$(document).bind(
'touchmove',
function(e) {
e.preventDefault();
}
);
这将阻止垂直滚动以及页面上发生的任何反弹效果。
我知道这有点偏离滑雪道，但我一直在使用Swiffy将Flash转换为交互式HTML5游戏并遇到相同的滚动问题，但没有找到有效的解决方案。
我遇到的问题是Swiffy阶段占据了整个屏幕，所以一旦加载，文件touchmove事件就永远不会被触发。
如果我尝试将相同的事件添加到Swiffy容器中，则在加载阶段后立即替换它。
最后，我通过将touchmove事件应用于舞台中的每个DIV来解决它（相当混乱）。由于这些div也在不断变化，我需要继续检查它们。
这是我的解决方案，似乎运作良好。我希望它对任何试图找到与我相同的解决方案的人都有帮助。
var divInterval = setInterval(updateDivs,50);
function updateDivs(){
$("#swiffycontainer > div").bind(
'touchmove',
function(e) {
e.preventDefault();
}
);}
overflow: scroll;
-webkit-overflow-scrolling: touch;
在容器上，您可以在元素内设置反弹效果
资料来源：http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/
var xStart, yStart = 0;
document.addEventListener('touchstart', function(e) {
xStart = e.touches[0].screenX;
yStart = e.touches[0].screenY;
});
document.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();
}
});
在不分离触摸事件侦听器的情况下，防止默认Safari滚动和反弹手势。
没有一个解决方案适合我。我就是这样做的。
html,body {
position: fixed;
overflow: hidden;
}
.the_element_that_you_want_to_have_scrolling{
-webkit-overflow-scrolling: touch;
}
在iphone中测试过。只需在目标元素容器上使用此css，它就会改变滚动行为，当手指离开屏幕时会停止滚动行为。
-webkit-overflow-scrolling: auto
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling