在JS中触摸板滚动检测，无库 [英] Touchpad scroll detection in JS, no library

问题描述

我正在制作自己的小型Javascript库，以便用自定义的库替换您的网站（和我的网站）的默认滚动条。其中一部分意味着给BODY元素一个overflow：hidden样式来隐藏正常的滚动条。但是，这可以防止除了在代码中完成的所有滚动操作。

当您单击/拖动它时， 。然而，许多触摸板（如我正在测试的计算机上）有一个功能，您可以通过沿着打击垫的右侧滑动手指进行滚动。我需要图书馆不要打破这一点，所以我需要一些检测用户试图以这种方式滚动的方式。

我认为它会被浏览器解释为一个鼠标滚轮，所以我建立了一个onmousewheel事件，但这似乎并没有捕获它。对于记录，我正在使用Firefox 25.0.1进行测试。

有没有什么方法可以捕获滚动包的滚动，最好是没有外部库？我试图保持这种自包含和轻量级的，但如果我绝对需要，我想我可以使用jQuery和它的鼠标滚轮扩展......

>解决方案

某些浏览器使用 onwheel 事件而不是 onmousewheel 。因此，倾听这两个事件通常是一个好主意。

看到这个 MDN文章详细了解 onwheel 。

I'm making my own little Javascript library that makes it easy to replace the default scrollbars for your Website (and mine) with custom ones. Part of that means giving the BODY element an "overflow:hidden" style to hide the normal scrollbars. However, this prevents all scrolling except for that which is done in code.

I have everything working in terms of showing the bar and having it scroll when you click/drag it. However, many touchpads (like on the computer I'm testing this with) have a feature where you can scroll by sliding a finger along the right side of the pad. I need the library not to break that, so I need some way of detecting when the user tries to scroll this way.

I thought it would be interpreted by the browser as a mouse wheel, so I set up an onmousewheel event, but that doesn't seem to capture it at all. For the record, I'm testing with Firefox 25.0.1.

Is there any way to capture the trackpack scrolling, preferably without an external library? I'm trying to keep this as self-contained and lightweight as possible, but if I absolutely need to, I guess I can use jQuery and its mousewheel extension...

解决方案

Some browsers use the onwheel event instead of onmousewheel. So, it's usually a good idea to listen for both events.

See this MDN article for more about onwheel.

这篇关于在JS中触摸板滚动检测，无库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！