<div class="box" id="div1"> <div style="margin-top:0;"> <p id="p">这是这块区域的内容内容内容内容内容内容内容内容内容</p> <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p> <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p> <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p> <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p> <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p> <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p> <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p> <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p> <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p> <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p> <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p> <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p> <p>这是这块区域的内容内容内容内容内容内容内容内容内容</p> </div> </div>
.box{position:relative;} #div1{ width:500px; height:300px; background:#ffff00; margin:0 auto; overflow:hidden; padding:10px; }
window.onload = function () { var oDiv = document.getElementById('div1'); var p=document.getElementById('p'); function onMouseWheel(ev) {/*当鼠标滚轮事件发生时,执行一些操作*/ var ev = ev || window.event; var down = true; // 定义一个标志,当滚轮向下滚时,执行一些操作 down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0; //这是对浏览器的兼容性测试
//console.log(ev.wheelDelta);//鼠标滚轮向下滚动时,谷歌、ie浏览器打印出-120;不兼容火狐
//console.log(ev.detail);//鼠标滚轮向下滚动时,火狐打印出3,只在火狐上有用 if(down){
//alert('鼠标向下滚动'); //console.log(oDiv.children[0].style.marginTop); var i=oDiv.children[0].style.marginTop; i=parseInt(i); console.log(i); if(i==(-180)){ return false; } i=i-10; oDiv.children[0].style.marginTop=i+'px'; //return false阻止默认事件,可以看成跳出本次事件执行,执行它之后,它之后的事件都不被执行 }else{ //alert('鼠标向上滚动'); var i1=oDiv.children[0].style.marginTop; i1=parseInt(i1); if(i1==0){ return false; } console.log(i1); i1=parseInt(i1)+10; oDiv.children[0].style.marginTop=i1+'px'; } if(ev.preventDefault){/*FF 和 Chrome*/ ev.preventDefault();// 阻止默认事件 } return false; } addEvent(oDiv,'mousewheel',onMouseWheel); addEvent(oDiv,'DOMMouseScroll',onMouseWheel); } function addEvent(obj,xEvent,fn) { if(obj.attachEvent){ obj.attachEvent('on'+xEvent,fn); }else{ obj.addEventListener(xEvent,fn,false); }
上面代码出来的效果如下:
鼠标在黄色区域滚轮滚动时,绿框的内容随之滚动,这是鼠标的滚轮事件。