前端笔记整理: 纯js 鼠标滚动和按钮点击滑动整页

原文参考 https://blog.csdn.net/tangdou5682/article/details/52351404

原先做的页面分为四块,每块都是整屏的. 为了实现这点只需要嵌在高度为100% 的控件里

在使用原博的css时, 我竟然不知道#号是什么意思,差点以为 main 和wrap是类, 结果一直实现不了.

##html

<div id="wrap">
	<div id="main">
		<div id="page1" class="page"></div>
		<div id="page2" class="page"></div>
		<div id="page3" class="page"></div>
		<div id="page4" class="page"></div>
	</div>
</div>

##CSS

<style type="text/css">
html,body{
	height:100%;
}
body,ul,li,a,p,div{padding:0px; margin:0px; font-size:14px;}
#wrap{
	overflow: hidden;
	width:100%;
}
#main{
	height:2944px;
	top:0;
	position: relative;
}
.page{
	width:100%;
	margin:0;
}
#page1{
	background:#E4E6CE;
}
#page2{
	background:#6CE26C;
}
#page3{
	background:#BF4938;
}
#page4{
	background:#2932E1;
}
</style>

javascritpt
自己又加了备注,希望对后人有用;

<script type="text/javascript">
    var wrap = document.getElementById("wrap");
	var main = document.getElementById("main");
	var hei = document.body.clientHeight; //获取网页显示的高度
	wrap.style.height = hei + "px";
	var obj = document.getElementsByTagName("div");//获取物体通过标签tag,这里建议改成section之类的,减少循环次数
	for(var i=0;i<obj.length;i++){
		if(obj[i].className == 'page'){
			 obj[i].style.height = hei + "px";
		}
	}
	//遍历div标签找出类名为page的
	
	//如果不加时间控制，滚动会过度灵敏，一次翻好几屏
	var startTime = 0, //翻屏起始时间  
        endTime = 0,  
        now = 0;     
   
    //浏览器兼容      
    if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){   
        document.addEventListener("DOMMouseScroll",scrollFun,false);        
    }  
    else if (document.addEventListener) {  
        document.addEventListener("mousewheel",scrollFun,false);  
    }  
    else if (document.attachEvent) {  
        document.attachEvent("onmousewheel",scrollFun);   
    }  
    else{  
        document.onmousewheel = scrollFun;  
    }  
    
    //滚动事件处理函数
    function scrollFun(event){
    	startTime = new Date().getTime();  
    	var delta = event.detail || (-event.wheelDelta);  
    	//mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
    	//DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
    	if ((endTime - startTime) < -1000){
    		if(delta>0 && parseInt(main.offsetTop) > -(hei*3)){
    			//向下滚动
    			now = now - hei;
    			toPage(now);
    	} 
	    	if(delta<0 && parseInt(main.offsetTop) < 0){
	    		//向上滚动
	    			now = now + hei;
	    			toPage(now);
	   		}
	   		 endTime = new Date().getTime();  
    	}
    	   else{  
                event.preventDefault();    
            }    
    }
     function toPage(now){        
         $("#main").animate({top:(now+'px')},1000);     //jquery实现动画效果
         //setTimeout("main.style.top = now + 'px'",1000);     javascript 实现动画效果
    }   
</script>

要试验也不用建三个文件了,都在一个html文件内就行.

如果要实现鼠标点击按钮向下滑,只需要

document.getElementById("button").onclick=scrollFun;

简单!