我正在创建一个 iPhone Web 应用程序，而您现在从 iOS5 开始就可以使用 position: fixed;用于标题等。
虽然它有效，但如果您在页面顶部向上滚动，它会在您无法再滚动之前显示通常的灰色区域一段时间
有没有办法阻止这种滚动？我尝试过类似溢出：隐藏；但我似乎找不到任何东西。
附：我只想要一件事停止滚动，我有一个名为#container 的 div，我仍然希望它能够滚动。
【问题讨论】：
标签： css web-applications
在查看了几个解决方案后，我开始创建自定义解决方案：
http://jaridmargolin.github.io/bouncefix.js/
bouncefix.add(el)
应用修复，使给定元素在滚动到极限时不再导致全身弹性反弹。
bouncefix.remove(el)
移除所有负责修复全身弹性反弹的监听器/观察器。
Scrollfix 是一个好的开始，但是我发现了几个问题：
它使用与滚动修复类似的方法。当您处于滚动极端之一时，就会出现问题。在 touchstart 上，我们会查看我们是在最高点还是最低点，如果我们在顶部，则添加 1px，如果我们在底部，则删除 1px。
不幸的是，这个技巧只有在我们能够设置 scrollTop 值的情况下才有效。如果内容还不能滚动，例如，您只有 1 个列表项，则整个正文将再次滚动。 Bouncefix.js 将通过使用事件委托并在触发 touchstart 时检查 scrollHeight 和 offsetHeight 来在幕后处理所有这些。在没有可滚动内容的情况下，容器上的所有滚动都被 e.preventDefault(); 阻止
【讨论】：
什么对我有用：
html, body, .scrollable {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
加号（使用 jQuery...）
$(function() {
$(document).on("touchmove", function(evt) { evt.preventDefault() });
$(document).on("touchmove", ".scrollable", function(evt) { evt.stopPropagation() });
});
evt.stopPropagation() 调用使用委托很重要，因为它也被文档捕获，但在最后一秒被取消。
实际上，这会捕获文档上的所有 touchmove 事件，但如果原始事件是从 .scrollable 冒泡出来的，我们只需 stopPropagation 而不是取消事件。
【讨论】：
overflow: auto 似乎搞乱了 iOS 上的固定位置元素。它们随着页面滚动，然后在滚动结束时卡入到位。
.scrollable 元素之外）来解决这个问题
试着把它放在你的 JS 文件的顶部..
document.ontouchmove = function(event){
event.preventDefault();
}
这将完全阻止您滚动页面，因此您将无法看到顶部的“灰色区域”。
【讨论】：
overflow:scroll 的任何其他元素的滚动。有什么办法可以避免这种情况发生？
更新：
这个问题一直困扰着很多人，但这是bjrn创建的可靠解决方案：
演示： http://rixman.net/demo/scroll/
这里有一个讨论：https://github.com/joelambert/ScrollFix/issues/2
这最初是由 ryan 发布的，以回答我的一个问题：Prevent touchmove default on parent but not child。
我希望这对某些人有所帮助。
原答案：
我实际上正在研究完全相同的问题，我遇到了这个问题：
https://github.com/joelambert/ScrollFix
我已经尝试过了，它几乎可以完美运行。如果您将所有代码复制到演示中并在 iOS 上试一试，除非您抓住黑色条并尝试滚动它，否则您将看不到灰色背景。但是，使用 Ben 提供的代码来防止这种情况发生应该很容易（ preventDefault() ）。
希望有所帮助（这绝对帮助了我！） 会:)
【讨论】：
ScrollFix doesn't prevent the page from being scrolled when if a touch is registered whilst the scrolling section is bouncing所以ScrollFix不是这个问题的解决方案。
像其他人建议的那样，我编写了一个快速函数，每当滚动到顶部或底部时，我的滚动 div 会增加一个像素，以防止整个页面被拖动。这对我的滚动 div 来说很好，但我页面上的固定 div 仍然容易受到页面拖动的影响。我无意中注意到，当我在滚动 div 顶部分层固定 div 时（由于我的凹凸功能不再拖动页面），触摸拖动事件通过固定 div 传递到下面的滚动 div 并且固定 div 没有更长的潜在页面拖动器。基于此，我认为可以在后台使用全屏滚动 div 作为整个页面的基础，以便所有拖动都可以通过，并且我在顶部的实际元素将是安全的。基础 div 需要实际滚动，所以我在其中放置了一个填充 div，并使其稍大以保证它可以滚动。它奏效了！下面是一个使用这个想法来防止页面拖动的例子。抱歉，如果这很明显或已经发布，但我在其他任何地方都没有看到它，它确实改善了我的网络应用程序。请尝试一下，如果有帮助，请告诉我。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
.myDiv {
position:absolute;
left:0;
width:100%;
color:white;
}
.myDiv.hidden {
top:0;
height:100%;
-webkit-overflow-scrolling:touch;
overflow-y:scroll;
}
.myDiv.title {
top:0;
height:30%;
background-color:#6297BC;
}
.myDiv.scroll {
bottom:0;
height:70%;
-webkit-overflow-scrolling:touch;
overflow-y:scroll;
background-color:#ADADAD;
}
</style>
<script>
function setup() {
hiddenScrollingDiv.addEventListener("scroll", preventWindowScroll);
visibleScrollingDiv.addEventListener("scroll", preventWindowScroll);
hiddenScrollingDiv.style.height=window.innerHeight;
visibleScrollingDiv.style.height=parseInt(window.innerHeight*.7)+1;
fillerDiv.style.height=window.innerHeight+2;
hiddenScrollingDiv.scrollTop=1;
visibleScrollingDiv.scrollTop=1;
}
function preventWindowScroll(evt) {
if (evt.target.scrollTop==0) evt.target.scrollTop=1;
else if (evt.target.scrollTop==(evt.target.scrollHeight-parseInt(evt.target.style.height))) evt.target.scrollTop=evt.target.scrollHeight-parseInt(evt.target.style.height)-1;
}
</script>
</head>
<body onload="setup()">
<div id="hiddenScrollingDiv" class="myDiv hidden"><div id="fillerDiv"></div></div>
<div id="visibleTitleDiv" class="myDiv title"><br><center>Non-scrolling Div</center></div>
<div id="visibleScrollingDiv" class="myDiv scroll">
<ul>
<li style="height:50%">Scrolling Div</li>
<li style="height:50%">Scrolling Div</li>
<li style="height:50%">Scrolling Div</li>
</ul>
</div>
</body>
</html>
【讨论】：
以前的解决方案建议：
document.ontouchmove = function(event){
event.preventDefault();
}
但是，这也会停止滚动感兴趣的元素。
为了克服这个问题，可以做以下事情：
preventDefault 技术，但仅当用户尝试进一步向下滚动时。preventDefault。这是实现上述逻辑的source code。
为方便起见，还可以下载 npm 包（在 iOS 移动/桌面 safari 以及 Android/桌面 Chrome 上使用 vanilla JS/React 进行测试）。
查看https://medium.com/jsdownunder/locking-body-scroll-for-all-devices-22def9615177 了解更多不同方法的说明。
【讨论】：