Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <div id="header">iScroll</div>
​
    <div id="wrapper">
        <div id="scroller">
            <ul>
                <li id="ret"></li>
                <li><a href="http://m.nuomi.com/">Pretty row 1</a></li>
                <li>Pretty row 2</li>
                <li data-url="http://m.nuomi.com/">Pretty row 3</li>
                <li>Pretty row 4</li>
                <li>Pretty row 5</li>
                <li>Pretty row 6</li>
                <li>Pretty row 7</li>
                <li>Pretty row 8</li>
                <li>Pretty row 9</li>
                <li>Pretty row 10</li>
                <li>Pretty row 11</li>
                <li>Pretty row 12</li>
                <li>Pretty row 13</li>
                <li>Pretty row 14</li>
                <li>Pretty row 15</li>
                <li>Pretty row 16</li>
                <li>Pretty row 17</li>
                <li>Pretty row 18</li>
                <li>Pretty row 19</li>
                <li>Pretty row 20</li>
            </ul>
        </div>
    </div>
​
    <div id="footer"></div>
</body>
</html>
 
    <style>
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
​
    html {
        -ms-touch-action: none;
    }
​
    body,ul,li {
        padding: 0;
        margin: 0;
        border: 0;
    }
​
    body {
        font-size: 12px;
        font-family: ubuntu, helvetica, arial;
        overflow: hidden; /* this is important to prevent the whole page to bounce */
    }
​
    #header {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 100%;
        height: 45px;
        line-height: 45px;
        background: #CD235C;
        padding: 0;
        color: #eee;
        font-size: 20px;
        text-align: center;
        font-weight: bold;
    }
​
    #footer {
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 48px;
        background: #444;
        padding: 0;
        border-top: 1px solid #444;
    }
​
    #wrapper {
        position: absolute;
        z-index: 1;
        top: 45px;
        bottom: 48px;
        left: 0;
        width: 100%;
        background: #ccc;
        /*overflow: hidden;*/
        overflow: auto;
    }
​
    #scroller {
        position: absolute;
        z-index: 1;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        width: 100%;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        -o-text-size-adjust: none;
        text-size-adjust: none;
    }
​
    #scroller ul {
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
        text-align: left;
    }
​
    #scroller li {
        padding: 10px;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #fff;
        background-color: #fafafa;
        font-size: 14px;
    }
​
    </style>
 
var ret = document.querySelector('#ret');
        
document.querySelector('#wrapper').addEventListener('touchstart', function (e) {
          // 阻止 click 触发
          // e.preventDefault();
          ret.textContent = ' -> touchstart';
        }, false)
        document.querySelector('#wrapper').addEventListener('touchmove', function (e) {
          // 不会阻止 click 触发, only prevent scroll and pinch-zoom
          // e.preventDefault();
          ret.textContent = ret.textContent + ' -> touchmove';
        }, false);
document.querySelector('#wrapper').addEventListener('touchend', function (e) {
  // 阻止 click 触发
  // e.preventDefault();
  ret.textContent = ret.textContent + ' -> touchend';
}, false);
document.querySelector('#wrapper').addEventListener('click', function (e) {
  // e.preventDefault();
  ret.textContent = ret.textContent + ' -> click';
}, false);
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers