HTML结构如下：
<div class=”outerScroller comment”><div class=’scroll comment’><div class=”inner comment” style=’overflow:auto;’><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul></div></div></div>js代码部分：! function () {function scroll(outerscroller, scroll, inner, callback) { this.outerScroller = document.querySelector(outerscroller); this.scroll = document.querySelector(scroll); this.inner = document.querySelector(inner) this.load = function () { var _this = this; this.scroll.style.height = window.innerHeight + ‘px’; var touchStart = 0; var touchDis = 0; this.outerScroller.addEventListener(‘touchstart’, function (event) { var touch = event.targetTouches[0]; // 把元素放在手指所在的位置 touchStart = touch.pageY; //获取到按下的页面的位置 }, false); this.outerScroller.addEventListener(‘touchmove’, function (event) { var touch = event.targetTouches[0]; console.log(touch.pageY, touchStart) if (_this.inner.scrollHeight – _this.inner.scrollTop <= _this.inner.clientHeight) { _this.scroll.style.top = _this.scroll.offsetTop + touch.pageY – touchStart + ‘px’; //页面定位的高度+页面移动点的位置-开始按下的页面位置 scroll.style.top = scroll.offsetTop + touch.pageY-touchStart + ‘px’ touchStart = touch.pageY; //将当前的位置赋值给开始移动的位置 } else { return } }, false); this.outerScroller.addEventListener(‘touchend’, function (event) { touchStart = 0; var top = _this.scroll.offsetTop; if (top < -80) callback && callback(); if (top < 0) { var time = setInterval(function () { _this.scroll.style.top = _this.scroll.offsetTop + 2 + ‘px’; if (_this.scroll.offsetTop >= 0) { clearInterval(time); } }, 1) } }, false); } this.load(); } window.scroll = scroll; }() var ns = new scroll(‘.outerScroller’, ‘.scroll’, ‘.inner’, function () { var ul = document.getElementsByTagName(‘ul’)[0]; for (var i = 10; i > 0; i–) { var node = document.createElement(“li”); node.innerHTML = “I’m new” + i; ul.appendChild(node) } }) CSS样式表：.comment {position: absolute;top: 0px;bottom: 0px;width: 100%;left: 0px;overflow: hidden;} li { list-style-type: none; height: 35px; background: #ccc; border-bottom: solid 1px #fff; text-align: left; line-height: 35px; padding-left: 15px; } ul { width: 100%; margin-top: 0px; position: absolute; left: 0px; padding: 0px; top: 0px; } 完整的代码如下：<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <title>Document</title> <style> .comment { position: absolute; top: 0px; bottom: 0px; width: 100%; left: 0px; overflow: hidden; } li { list-style-type: none; height: 35px; background: #ccc; border-bottom: solid 1px #fff; text-align: left; line-height: 35px; padding-left: 15px; } ul { width: 100%; margin-top: 0px; position: absolute; left: 0px; padding: 0px; top: 0px; } </style></head><body> <div class=”outerScroller comment”> <div class=’scroll comment’> <div class=”inner comment” style=’overflow:auto;’> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> </div> </div> <script> ! function () { function scroll(outerscroller, scroll, inner, callback) { this.outerScroller = document.querySelector(outerscroller); this.scroll = document.querySelector(scroll); this.inner = document.querySelector(inner) this.load = function () { var _this = this; this.scroll.style.height = window.innerHeight + ‘px’; var touchStart = 0; var touchDis = 0; this.outerScroller.addEventListener(‘touchstart’, function (event) { var touch = event.targetTouches[0]; // 把元素放在手指所在的位置 touchStart = touch.pageY; //获取到按下的页面的位置 }, false); this.outerScroller.addEventListener(‘touchmove’, function (event) { var touch = event.targetTouches[0]; console.log(touch.pageY, touchStart) if (_this.inner.scrollHeight – _this.inner.scrollTop <= _this.inner.clientHeight) { _this.scroll.style.top = _this.scroll.offsetTop + touch.pageY – touchStart + ‘px’; //页面定位的高度+页面移动点的位置-开始按下的页面位置 scroll.style.top = scroll.offsetTop + touch.pageY-touchStart + ‘px’ touchStart = touch.pageY; //将当前的位置赋值给开始移动的位置 } else { return } }, false); this.outerScroller.addEventListener(‘touchend’, function (event) { touchStart = 0; var top = _this.scroll.offsetTop; if (top < -80) callback && callback(); if (top < 0) { var time = setInterval(function () { _this.scroll.style.top = _this.scroll.offsetTop + 2 + ‘px’; if (_this.scroll.offsetTop >= 0) { clearInterval(time); } }, 1) } }, false); } this.load(); } window.scroll = scroll; }() var ns = new scroll(‘.outerScroller’, ‘.scroll’, ‘.inner’, function () { var ul = document.getElementsByTagName(‘ul’)[0]; for (var i = 10; i > 0; i–) { var node = document.createElement(“li”); node.innerHTML = “I’m new” + i; ul.appendChild(node) } }) </script></body></html>
