【发布时间】：2014-02-18 04:18:49
【问题描述】：
我正在尝试禁用反弹效果，以便当您到达滚动 div 的末尾时，它会停止死，根本没有反弹。这在 mac safari 上运行良好，但在移动 safari 中却没有。
到目前为止，我有这段代码，它确实停止了反弹效果，因此您不再看到灰色，但它所做的只是将反弹更改为我的背景颜色。
任何人都可以帮忙，请不要说这是重复的，因为我已经解决了所有其他问题，这是迄今为止我想出的最好的。代码需要在手机上查看。
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="cleartype" content="on">
<style type="text/css">
html, body {
overflow:hidden;
height:100%;
width:100%;
}
* {
border:0px;
margin:0px;
}
#page-wrapper {
width:100%;
height:100%;
}
#top {
background:red;
width:100%;
height:50%;
position:fixed;
z-index:1;
}
#bottom {
background:green;
width:100%;
height:50%;
position:fixed;
z-index:1;
}
#content-wrapper {
box-sizing:border-box;
height:100%;
width:100%;
overflow:scroll;
-webkit-overflow-scrolling:touch;
position:relative;
z-index:2;
background:pink;
}
</style>
</head>
<body>
<div id="page-wrapper">
<div id="top"></div>
<div id="bottom"></div>
<div id="content-wrapper" class="scrollable">
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>john</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>john</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>Test</h1>
<h1>john</h1>
</div>
</div>
<script>
document.body.addEventListener('touchmove',function(e){
if(!$(e.target).hasClass("scrollable")) {
e.preventDefault();
}
});
</script>
</body>
</html>
【问题讨论】：
-
谢谢，它的工作原理与描述的完全一样，尚未跨平台测试，但到目前为止还不错。
-
我在那里提出了一个烦人的问题，这对我来说是个大问题，它似乎会“杀死”任何从 textarea 元素开始的触摸滚动。我的表单上有很多大的文本框，这使得滚动很困难。我懒得尝试进一步调查这个问题，因为我实际上想要橡皮筋，它只是发生在错误的元素上（例如，橡皮筋固定头）。更多信息在这里：stackoverflow.com/questions/10357844/…...祝你好运:)
-
谢谢亚当。我为此苦苦挣扎了很久，看起来很简单，但没有人能找到完美执行的答案。
-
必须继续寻找，我的页脚不太适用，一旦我将 fix 放入页脚 css，它就会停止工作。
标签： javascript jquery css