冒泡滚动/鼠标滚轮事件

Ale*_*kov 0 html javascript gwt mousewheel delta

我已经设置了我的应用程序/网站,以便在滚动面板顶部有一个绝对定位的画布元素,当滚动面板滚动时,我将偏移应用到画布上,使其看起来像图像滚动(这允许我有巨大的帆布没有巨大的帆布元素的开销).问题是,当我的鼠标位于画布元素上时,滚轮不起作用,因为滚动事件不会冒泡.但是,在这种情况下,我需要冒泡才能使滚动条工作.

我正在使用GWT,所以我宁愿不依赖于jQuery解决方案(虽然纯粹的javascript解决方案也可以),因为将两者混合起来有点困难.我可以捕捉鼠标滚轮事件,但主要问题是它似乎没有区分滚动(向上/向下)和车轮倾斜(左/右).我尝试了eventGetShiftKey(),eventGetButton(),eventGetType()和其他一些但是所有这些方法都返回了相同的滚动和倾斜结果(向左倾斜=向上滚动,向右倾斜=向下滚动).

似乎处理这个问题的最好方法是将实际事件冒泡到scrollpanel(顺便提一下,它还包含包含绝对定位画布的父div),但我不确定这是否可能?

gbl*_*zex 6

鼠标滚轮事件确实起泡,区分上/下滚动使用event.wheelDeltaevent.detail属性.

event.wheelDelta 表示滚轮按钮旋转的距离,以120的倍数表示.正值表示滚轮按钮已旋转远离用户.负值表示车轮按钮已朝向用户旋转.

event.detail 指定鼠标滚轮移动的"刻度"数.正值表示向下/向右",负向上/向左
.event.axis 指定滚动手势的轴(水平或垂直).此属性已在Firefox 3.5中添加

另请参阅本文,其中介绍了一些关于规范化的内容.