标签：元素 自定义 undo 目标 inner oct list body abs
<!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>
//来自：http://www.cnblogs.com/samwu/p/3508548.html
标签：元素 自定义 undo 目标 inner oct list body abs
原文地址：http://www.cnblogs.com/zhujiasheng/p/7257130.html
