您的位置:首页 > 其它

手机web自己定义滑动事件

2014-07-25 10:14 148 查看
手机上使用positon:fixed定位,使用滚动条时,兼容性不好,所以自定义滑动事件

var dataScrol = {startY:0,endY:0,posY:0,maxScroll:1,isBind:false};
var scrollHandler = function (e) { e.preventDefault(); };
//禁用自定义滑动事件
document.addEventListener('touchmove', scrollHandler, false);

//dataScrol.posY = 0;

if(!dataScrol.isBind){
dataScrol.isBind = true;
var o_scroll = document.getElementById('orderDetailScroll');
var o_wrap = document.getElementById('orderDetailWrap');

dataScrol.maxScroll = o_wrap.scrollHeight - o_wrap.offsetHeight;

if (dataScrol.maxScroll == 0) return;

o_wrap.addEventListener('touchstart', function (e) {
dataScrol.startY = e.touches[0].pageY;
}, false);

o_wrap.addEventListener('touchmove', function (e) {
dataScrol.endY = e.touches[0].pageY;

var newY = dataScrol.posY + (dataScrol.endY-dataScrol.startY);

if(newY>0){
newY = 0;
}else if(newY<-dataScrol.maxScroll){
newY = -dataScrol.maxScroll;
}

dataScrol.posY = newY;

o_scroll.style.webkitTransform = 'translate(0,'+dataScrol.posY+'px)';
dataScrol.startY = dataScrol.endY;
}, false);

o_wrap.addEventListener('touchend', function (e) {
dataScrol.startY = 0; dataScrol.endY=0;
}, false);
}
//解除自定义事件
//document.removeEventListener('touchmove',scrollHandler,false);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: