1

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

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

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

4

1 回答 1

6

event.wheelDelta鼠标滚轮事件确实冒泡,使用和event.detail属性区分向上/向下滚动。

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

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

另请参阅这篇文章,其中讨论了一些关于规范化的内容。

于 2011-06-01T00:41:53.313 回答