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


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值