资源预览内容
第1页 / 共3页
第2页 / 共3页
第3页 / 共3页
亲,该文档总共3页全部预览完了,如果喜欢就下载吧!
资源描述
隐藏滚动条也能用滚轮滚动页面#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 = (eventName 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 ) 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的浮点 bugcallback.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;无滚动条,试用滚轮滚动1无滚动条,试用滚轮滚动2无滚动条,试用滚轮滚动3无滚动条,试用滚轮滚动4无滚动条,试用滚轮滚动5无滚动条,试用滚轮滚动6无滚动条,试用滚轮滚动7无滚动条,试用滚轮滚动8无滚动条,试用滚轮滚动9无滚动条,试用滚轮滚动10无滚动条,试用滚轮滚动11无滚动条,试用滚轮滚动12无滚动条,试用滚轮滚动13无滚动条,试用滚轮滚动14无滚动条,试用滚轮滚动15无滚动条,试用滚轮滚动16无滚动条,试用滚轮滚动17运行效果如下:
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号