js滚动事件

js滚动滑轮

var slide = {index:1,scrollB:true,scroll:function(e){var e = e || window.event;if(!slide.scrollB) return;slide.scrollB = false;//设置滚动高度 屏的高度var top = [0,-834,-1654,-2433,-3251,-3550];var box = document.getElementById("slide");//找到滚动元素setTimeout(function(){if(e.detail){//向下滚动if(e.detail>0){slide.index++;if(slide.index>=6) slide.index=6;box.style.cssText = "-webkit-transform:translateY("+top[slide.index-1]+"px);transform:translateY("+top[slide.index-1]+"px)";}else{//向上滚动slide.index--;if(slide.index<=1) slide.index=1;if(slide.index==5){slide.index=4;}box.style.cssText = "-webkit-transform:translateY("+top[slide.index-1]+"px);transform:translateY("+top[slide.index-1]+"px)";}}else if(e.wheelDelta){//向上滚动if(e.wheelDelta>0){slide.index--;if(slide.index<=1) slide.index=1;if(slide.index==5){slide.index=4;}box.style.cssText = "-webkit-transform:translateY("+top[slide.index-1]+"px);transform:translateY("+top[slide.index-1]+"px)";}else{//向下滚动slide.index++;if(slide.index>=6) slide.index=6;box.style.cssText = "-webkit-transform:translateY("+top[slide.index-1]+"px);transform:translateY("+top[slide.index-1]+"px)";}}setTimeout(function(){//设置添加currentvar child = box.getElementsByTagName("section");var len = child.length;for( i in child ){var s = child[i].className;if(s && s.indexOf("current")>-1){s = s.replace("current","");child[i].className = s ;}}if(slide.index==6){slide.index=5;}//滚动到的当前区域添加currentchild[slide.index-1].className = 'sec'+slide.index+" current";slide.scrollB = true;},500);e.preventDefault();},300);},scrollEvent:function(){//判断浏览器 滚轮事件if(window.addEventListener){window.addEventListener("DOMMouseScroll",this.scroll,false);}window.onmousewheel = this.scroll;},init:function(){this.scrollEvent();}
};
// 调用上面的init
slide.init();

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！