《隐藏滚动条滚动html页面方法.doc》由会员分享,可在线阅读,更多相关《隐藏滚动条滚动html页面方法.doc(3页珍藏版)》请在金锄头文库上搜索。
1、隐藏滚动条也能用滚轮滚动页面#outterwidth:200px;height:300px;overflow:hidden;border:#999 inset 1px;#innerwidth:200px;position:relative;line-height:30px;/滚轮事件function addWheelEvt()var eventSupported = function( eventName,el ) el = el | document.createElement(div);eventName = on + eventName;var isSupported = (eventN
2、ame in el);if (el.setAttribute & !isSupported ) el.setAttribute(eventName, return;);isSupported = typeof eleventName = function;el = null;return isSupported;var addEvent = function(obj,type,callback)if ( obj.addEventListener ) obj.addEventListener( type, callback, false ); else if ( obj.attachEvent
3、) 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系列的
4、滚动方向与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的浮点 bugcallback.call(obj,event););wheel(document.getElementById(inner),function(e)/给内容div添加滚
5、轮事件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;无滚动条,试用滚轮滚动1无滚动条,试用滚轮滚动2无滚动条,试用滚轮滚动3无滚动条,试用滚轮滚动4无滚动条,试用滚轮滚动5无滚动条,试用滚轮滚动6无滚动条,试用滚轮滚动7无滚动条,试用滚轮滚动8无滚动条,试用滚轮滚动9无滚动条,试用滚轮滚动10无滚动条,试用滚轮滚动11无滚动条,试用滚轮滚动12无滚动条,试用滚轮滚动13无滚动条,试用滚轮滚动14无滚动条,试用滚轮滚动15无滚动条,试用滚轮滚动16无滚动条,试用滚轮滚动17运行效果如下: