手机web自己定义滑动事件

手机上使用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);


你可能感兴趣的:(html5,自定义滑动)