话不多说，附上代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" type="text/css" href="css/sp_common.css"/> <style type="text/css"> body{ background: gray; overflow: hidden; } .wrap-ul li{ width: 100%; height: 100%; color: #fff; font-size: 50px; text-align: center; } .wrap-ul li:first-child{ background: green; } .wrap-ul li:nth-child(2){ background: greenyellow; } .wrap-ul li:nth-child(3){ background: cyan; } .wrap-ul li:last-child{ background: darkslategray; } .item-ul{ height: 200px; width: 50px; position: fixed; top: 45%; right: 5%; /*background: red;*/ } .item-ul li{ width: 100%; height: 25%; line-height: 40px; text-align: center; color: white; font-size: 18px; border: 1px solid black; border-radius: 50%; margin-top: 2px; cursor: pointer; } .li-active{ background: red; color: #000000; } </style> </head> <body> <ul class="wrap-ul w h"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ul> <ul class="item-ul"> <li class="li-active">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('body,html').animate({scrollTop: 0}, 1000); var index=0; var scrollHeight=$(window).innerHeight(); $('.item-ul li').click(function(){ index=$(this).index(); console.log(index); $(this).addClass('li-active').siblings().removeClass('li-active'); $('body,html').animate({scrollTop: scrollHeight*index}, 1000); /*$('body').scrollTop(1000);*/ }); $(window).resize(function(){ var w=$(window).width(); var h=$(window).height(); $('.wrap-ul li').css({width:w,height:h}); $('body,html').scrollTop(h*index); });
//以下两个兼容性代码可以做一些合并处理，我就没做了。
//ie（ev.wheelDelta）和chrome（ev.deltaY）滚动事件的兼容 document.body.addEventListener('mousewheel',function(ev){ console.log(ev); if (ev.deltaY>0 || ev.wheelDelta<0) { /*console.log('下滚');*/ if(!$(document.body).is(':animated'))moveNext(); } else{ /*console.log('上滚');*/ if(!$(document.body).is(':animated'))movePrev(); } });
//firefox的滚动事件 document.body.addEventListener('DOMMouseScroll',function(ev){ if (ev.detail>0) { console.log(3) if(!$(document.body).is(':animated'))moveNext(); } else{ if(!$(document.body).is(':animated'))movePrev(); } }); function moveNext(){ /* if(index==0){*/ if(index<3){ $('body,html').animate({scrollTop: scrollHeight*(++index)}, 1000); } $('.item-ul li:eq('+index+')').addClass('li-active').siblings().removeClass('li-active'); /* }*/ } function movePrev(){ if(index>0){ $('body,html').animate({scrollTop: scrollHeight*(--index)}, 1000); } $('.item-ul li:eq('+index+')').addClass('li-active').siblings().removeClass('li-active'); } </script> </body> </html>
其中的sp_common.css文件内容为：
/***********通用基本类1************/ /*格式化样式*/ html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,button,fieldset,input,textarea,p,blockquote,table,th,td {margin:0;padding:0;} table {border-collapse:collapse;border-spacing:0;} header, footer, section, article, aside, nav, address, figure, figcaption, menu, details {display: block;} fieldset,img {border:0} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal} ol,ul {list-style:none} a{text-decoration: none;} a:hover{text-decoration:none;cursor: pointer;} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal} html{ font-size: 10px; } /*.box-main{ overflow: hidden; }*/ html,body{ height: 100%; width: 100%; font-weight: normal; } *{ box-sizing: border-box; } .w{width:100%} .h{height:100%} /*------------ text -------------*/ .tl { text-align:left} .tc { text-align:center} .tr { text-align:right} /*------------ float ------------*/ .fl{float:left;display:inline-block} .fr{float:right;display:inline-block} /*------------ clear-float ---------*/ /*.clear{content: ".";display: block;clear: both;}*/ .clear{*zoom:1;} .clear::after { content: ""; display: table; clear: both; } .cursor{cursor: pointer;} .border{border: 1px solid #CCCCCC} .b-bottom{border-bottom: 1px solid #CCCCCC} .b-top{border-top: 1px solid #CCCCCC} .b-right{border-right: 1px solid #CCCCCC} .b-left{border-left: 1px solid #CCCCCC} .b-radius{border-radius: 50%} /*------------ position ------------*/ .pr { position:relative;} .pa { position:absolute;} .pf { position: fixed;}
一开始我的html文件是这样命名的：“官网.html” 没错用了汉子。谷歌和火狐都能识别。ie识别不了，把“官网.html”改成 “dddd.html” 只要是英文，ie就打开了。原因就是你既然内容用的是utf-8，那么文件名也要符合utf-8的规范，，，本来想做一个滚轮事件的demo制作，没想到踩这个坑了！
