Question

我正在尝试禁用反弹效果，这样当你到达滚动div的末尾时，它将停止死亡，根本不会反弹。这可以在mac 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>

Answer 1

2.3以下的Android浏览器不支持overflow：scroll属性。

停止反弹/橡皮筋/过度滚动效果

1 个答案: