隐藏滚动条滚动html页面方法.docVIP

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 4.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title隐藏滚动条也能用滚轮滚动页面/title style #outter{ width:200px; height:300px; overflow:hidden; border:#999 inset 1px; } #inner{ width:200px; position:relative; line-height:30px; } /style script //滚轮事件 function addWheelEvt(){ var eventSupported = function( eventName,el ) { el = el || document.createElement(div); eventName = on + eventName; var isSupported = (eventName in el); if (el.setAttribute !isSupported ) { el.setAttribute(eventName, return;); isSupported = typeof el[eventName] === function; } el = null; return isSupported; }; var addEvent = function(obj,type,callback){ if ( obj.addEventListener ) { obj.addEventListener( type, callback, false ); } else if ( obj.attachEvent ) { obj.attachEvent( on + type, callback ); } } var type = eventSupported(mousewheel) ? mousewheel:DOMMouseScroll; //注意IE下window没有滚轮事件 var wheel = function(obj,callback){ addEvent(obj, type,function(event){ event = event || window.event; var delta = 0; if (event.wheelDelta) { delta = event.wheelDelta/120; //opera 9x系列的滚动方向与IE保持一致，10后修正 if(window.opera window.opera.version() 10) delta = -delta; } else if (event.detail) { delta = -event.detail/3; } //由于事件对象的原有属性是只读，我们只能通过添加一个私有属性delta来解决兼容问题 event.delta = Math.round(delta); //修正safari的浮点 bug callback.call(obj,event); }); } wheel(document.getElementById(inner),function(e){//给内容div添加滚轮事件 scrollDiv(e.delta); }); } function scrollDiv(delta){ var div = document.getElementById(inner); var top = parseInt(div.style.top); if(isNaN(top))top=0; var speed = 10;//滚动速度 div.style.top = top+(speed * delta)+px; } /script /head body onload=addWheelEvt() div id=outter div id=inner 无滚动条，试用滚轮滚动1 无滚动条，试用滚轮滚动2 无滚动条，试用滚轮滚动3 无滚动条，试用滚轮滚动4 无滚动条，试用滚轮滚动5 无滚动条，试用滚轮滚动6 无滚动条，试用滚轮滚动7 无滚动条，试用滚轮滚动8 无滚动条，试用滚轮滚动9 无滚