阻止移动端浏览器滑动

移动端页面放在苹果浏览器和qq浏览器里面，当页面滑动过头的时候就会拉出浏览器难看的背景，试用了很多方法没终于找到一个相对靠谱的方案。

首先要阻止整个页面的滚动，然后把页面的内容全部放在一个div里面再通过响应touch等事件去模拟滚动这个div

阻止页面滚动的代码很简单：

document.addEventListener('touchmove', function (e) {
    e.preventDefault(); 
}, false);

模拟div滚动可是很麻烦的，反正我自己写了个简单的效果不理想，于是刚脆使用了iscroll-lite.js来解决滚动问题

整个页面代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport" />
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <script src="iscroll-lite.js"></script>
    <style type="text/css">
        .Content-Box {
            position: absolute;
            z-index: 1;
            top: 0px;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            padding: 0px;
            margin: 0px;
        }
        .Content-Box ul{
            padding: 0px;
            margin: 0px;
            padding-bottom: 40px;
        }
        body{
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>
<body onload="loaded()">
<script type="text/javascript">

    var myScroll;

    function loaded () {
        myScroll = new IScroll('.Content-Box', { mouseWheel: true, click: true });
    }

    document.addEventListener('touchmove', function (e) {
        e.preventDefault(); 
    }, false);

</script>
<div class="Content-Box">
   <ul>
       <h1>this demo</h1>
       <p>1</p>
       <p>2</p>
       <p>3</p>
       <p>4</p>
       <p>5</p>
       <p>6</p>
       <p>7</p>
       <p>8</p>
       <p>9</p>
       <p>10</p>
       <p>11</p>
       <p>12</p>
       <p>13</p>
       <p>14</p>
       <p>15</p>
       <p>16</p>
       <p>17</p>
       <p>18</p>
       <p>19</p>
       <p>20</p>
       <p>21</p>
       <p>22</p>
       <p>23</p>
       <p>24</p>
       <p>25</p>
       <p>26</p>
       <p>27</p>
       <p>test</p>
       <p>test</p>
       <p>test</p>
       <p>test</p>
       <p>test</p>
       <p>test</p>
       <p>test</p>
       <p>test</p>
       <p>test</p>
   </ul>
</div>
</body>
</html>

阻止移动端浏览器滑动

相关内容

访问排行