<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta id="viewport" name="viewport" content="initial-scale=1.0,user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>移动端网页自定义滚动条</title> <style type="text/css"> #outer_div{ width: 100px; height: 100px; /*position: absolute;*/ } .inner_div{ width: 100px; height: 100px; border: 1px solid #efefef; } </style> </head> <body> <div> 我的开发经验是，横向滚动可以用overflow-x:scoll;<br /> 然而竖向滚动，当滚到底时，会带动整张页面。原谅我这里忘了测试，好像iphone不会带动，android会带动。<br /> 这时候你要自己写滚动。 </div> <div id="outer_div"> <div class="inner_div">1</div> <div class="inner_div">2</div> <div class="inner_div">3</div> <div class="inner_div">4</div> <div class="inner_div">5</div> <div class="inner_div">6</div> <div class="inner_div"></div> <div class="inner_div"></div> <div class="inner_div"></div> <div class="inner_div"></div> <div class="inner_div"></div> <div class="inner_div"></div> <div class="inner_div"></div> <div class="inner_div"></div> </div> <script type="text/javascript"> var gundongX = 0; var gundongY = 0; var d = document; var g = 'getElementById'; var moveEle = d[g]('outer_div'); var stx = sty = etx = ety = curX = curY = 0; moveEle.addEventListener("touchstart", function(event) { //touchstart gundongX = 0; gundongY = 0; // 元素当前位置 etx = parseInt(getT3d(moveEle, "x")); ety = parseInt(getT3d(moveEle, "y")); // 手指位置 stx = event.touches[0].pageX; sty = event.touches[0].pageY; }, false); moveEle.addEventListener("touchmove", function(event) { // 防止拖动页面 event.preventDefault(); // 手指位置 减去 元素当前位置 就是 要移动的距离 gundongX = event.touches[0].pageX - stx; gundongY = event.touches[0].pageY - sty; // 目标位置 就是 要移动的距离 加上 元素当前位置 curX = gundongX + etx; curY = gundongY + ety; // 自由移动 // moveEle.style.webkitTransform = 'translate3d(' + (curX) + 'px, ' + (curY) + 'px,0px)'; // 只能移动Y轴方向 moveEle.style.webkitTransform = 'translate3d(' + 0 + 'px, ' + (curY) + 'px,0px)'; }, false); moveEle.addEventListener("touchend", function(event) { //touchend etx = curX; ety = curY; }, false); function getT3d(elem, ename) { var str1 = elem.style.webkitTransform; if (str1 == "") return "0"; str1 = str1.replace("translate3d(", ""); str1 = str1.replace(")", ""); var carr = str1.split(","); if (ename == "x") return carr[0]; else if (ename == "y") return carr[1]; else if (ename == "z") return carr[2]; else return ""; } </script> </body> </html>
写成zepto插件，注意这里是使用zepto1.2版本，fx要自己组装的。
<!doctype html> <html> <head> <title>uscroll插件</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <!--demo展示所用js end--> <style type="text/css"> body{ margin: 0; } #main { height: 360px; overflow: hidden; } #thelist{ list-style: none; padding: 0; margin: 0; width: 100%; text-align: left; } #thelist li { height:44px; line-height:44px; color:#333; border-bottom: 1px solid #e7e7e7; background-color: #fafafa; font-size: 16px; font-weight:bold; padding: 0 10px; } </style> </head> <body> <div id="main"> <div id="thelist" > </div> </div> <div id="gotop"></div> <script type="text/javascript" src="zepto.min.js"></script> <script type="text/javascript" src="zepto_fx.js"></script> <script type="text/javascript"> ; (function($) { $.extend($.fn, { uscroll: function() { var gundongX = 0; var gundongY = 0; var $this = this; var moveEle = this[0]; var this_height = parseInt($this.css("height")); var parent_height = parseInt($this.parent().css("height")); var need_height = this_height - parent_height; var stx = sty = etx = ety = curX = curY = 0; moveEle.addEventListener("touchstart", function(event) { //touchstart gundongX = 0; gundongY = 0; // 元素当前位置 etx = parseInt(getT3d(moveEle, "x")); ety = parseInt(getT3d(moveEle, "y")); // 手指位置 stx = event.touches[0].pageX; sty = event.touches[0].pageY; }, false); moveEle.addEventListener("touchmove", function(event) { // 防止拖动页面 event.preventDefault(); // 手指位置 减去 元素当前位置 就是 要移动的距离 gundongX = event.touches[0].pageX - stx; gundongY = event.touches[0].pageY - sty; // 目标位置 就是 要移动的距离 加上 元素当前位置 curX = gundongX + etx; curY = gundongY + ety; // 自由移动 // moveEle.style.webkitTransform = 'translate3d(' + (curX) + 'px, ' + (curY) + 'px,0px)'; // 只能移动Y轴方向 moveEle.style.webkitTransform = 'translate3d(' + 0 + 'px, ' + (curY) + 'px,0px)'; // $this.animate({"translate3d":"0,"+(curY)+"px,0"},300,"ease-out"); }, false); moveEle.addEventListener("touchend", function(event) { //touchend if(curY > 0){ if($.fn.animate){ $this.animate({"translate3d":"0,0,0"},300,"ease-out"); } else{ moveEle.style.webkitTransform = 'translate3d(' + 0 + 'px, ' + (curY) + 'px,0px)'; } } if (curY < -need_height) { if ($.fn.animate) { $this.animate({ "translate3d": "0," + (-need_height) + "px,0" }, 300, "ease-out"); } else { moveEle.style.webkitTransform = 'translate3d(' + 0 + 'px, ' + (-need_height) + 'px,0px)'; } } etx = curX; ety = curY; }, false); function getT3d(elem, ename) { var str1 = elem.style.webkitTransform; if (str1 == "") return "0"; str1 = str1.replace("translate3d(", ""); str1 = str1.replace(")", ""); var carr = str1.split(","); if (ename == "x") return carr[0]; else if (ename == "y") return carr[1]; else if (ename == "z") return carr[2]; else return ""; } } }); })(Zepto); </script> <script> //填充页面 for(var i = 0, html = []; i < 50; i++) {html.push('<li>第 ' + i + ' 行</li>');} $('#thelist').html(html.join('')); $("#thelist").uscroll(); </script> </body> </html>