止弹/橡皮筋/overscroll效应
止弹/橡皮筋/overscroll效应
提问于 2014-01-27 10:54:30
我试图禁用弹跳效果，这样当你到达滚动div结束时，它会停止，完全没有弹跳。这在的比赛中很好，而不是在移动的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>回答 1
Stack Overflow用户
回答已采纳
发布于 2014-01-27 11:23:35
2.3以下的Android浏览器不支持溢出:滚动属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21378965
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号