JavaScript鼠标滚动事件

Firefox使用DOMMouseScroll,其他的浏览器使用mousewheel。滚动事件触发时Firefox使用detail属性捕捉滚轮信息,其他的浏览器使用wheelDelta。不知道为何在该问题上其他厂商和微软的如此一致。Firefox可以使用addEventListener方法绑定DomMouseScroll事件。 elem.addEventListener('DOMMouseScroll', func, false); IE和其他的主流浏览器可以使用传统的事件绑定模型。但不要使用IE专有的attachEvent方法,其他主流浏览器并不识别微软的这个方法。下面先测试一下。 鼠标移到此处,滚动滚轮 // 测试之后得到如下的结论。 Firefox 鼠标滚轮向上滚动是-3,向下滚动是3 IE 鼠标滚轮向上滚动是120,向下滚动是-120 Safari 鼠标滚轮向上滚动是360,向下滚动是-360 Opera 鼠标滚轮向上滚动是120,向下滚动是-120 Chrome 鼠标滚轮向上滚动是120,向下滚动是-120 代码尚有不适合之处。网上给的Safari的值为120,不过我测 » » »阅读更多

JavaScript确定浏览器滚动条的位置

当页面内容过多,超出了浏览器可视区域就会出现滚动条。访问者浏览到当前页面底部的时候,总要通过某种方式来回到头部的导航区域。这时可以利用滚动条,但开发者通常会在页面底部添加一条空链接(<a href=”#”>Top</a>)来帮助访问者回到页面头部。Web观念的革新带来了设计理念的飞跃,良好的用户体验成为Web2.0时代的普遍追求。利用JavaScript技术可以使停留在页面底部的滚动条平稳且带有动画效果地滑到页面头部。这里只是讨论一下关于滚动条的问题,至于要达到动画效果请参考别的文章。 其实获取页面滚动条的位置并不是难点所在,关键是要兼容各家浏览器的不同实现。 HTML文档头部没有<!DOCTYPE..声明时,Chrome和Safari可以得到滚动条的值,其他的浏览器只返回0。建议所有的文档都加上DOCTYPE声明,以便JavaScript可以更好地工作。各主流浏览器可通过以下的方式获取滚动条的值。 Firefox、Opera、IE document.documentElement.scrollTop » » »阅读更多