Javascript 停止反弹/橡皮筋/过卷效应
我正在尝试禁用反弹效果，这样当你到达滚动div的末尾时，它就会停止，完全没有反弹。这在mac safari上运行良好，而不是在mobile safari上 到目前为止，我有这个代码，它确实停止反弹效果，使你不再看到灰色，但它所做的是改变我的背景颜色反弹 有人能帮忙吗？请不要说这是重复的，因为我已经回答了所有其他问题，这是我迄今为止提出的最好的问题。代码需要在手机上查看Javascript 停止反弹/橡皮筋/过卷效应,javascript,jquery,css,Javascript,Jquery,Css,我正在尝试禁用反弹效果，这样当你到达滚动div的末尾时，它就会停止，完全没有反弹。这在mac safari上运行良好，而不是在mobile safari上 到目前为止，我有这个代码，它确实停止反弹效果，使你不再看到灰色，但它所做的是改变我的背景颜色反弹 有人能帮忙吗？请不要说这是重复的，因为我已经回答了所有其他问题，这是我迄今为止提出的最好的问题。代码需要在手机上查看 <!DOCTYPE html> <head> <meta http-equiv="Content-
<!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>
无标题文件
html，正文{
溢出：隐藏；
身高：100%；
宽度：100%；
}
* {
边界：0px；
边际：0px；
}
#页面包装器{
宽度：100%；
身高：100%；
}
#顶{
背景：红色；
宽度：100%；
身高：50%；
位置：固定；
z指数：1；
}
#底部{
背景：绿色；
宽度：100%；
身高：50%；
位置：固定；
z指数：1；
}
#内容包装器{
框大小：边框框；
身高：100%；
宽度：100%；
溢出：滚动；
-webkit溢出滚动：触摸；
位置：相对位置；
z指数：2；
背景：粉红色；
}
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
厕所
试验
试验
试验
试验
试验
厕所
试验
试验
试验
试验
试验
厕所
document.body.addEventListener（'touchmove'，函数（e）{
if（！$（e.target）.hasClass（“可滚动”））{
e、 预防默认值（）；
}
});