简体繁体 English

使用溢出捕获Element上的滚动事件：使用Javascript隐藏

[英]Capture Scroll Event on Element with overflow: hidden Using Javascript

原文 2016-09-01 17:00:52 7 1 javascript

EDIT: Thanks for the comments so far! 编辑：感谢到目前为止的评论！ Here's a JS fiddle with (hopefully all of) the relevant code: 这是一个JS小提琴，带有（希望所有）相关代码：

https://jsfiddle.net/3y1cw6nt/ https://jsfiddle.net/3y1cw6nt/

I have an image slider set up where the images' classes are toggled between .above , .active and .below , and their top: attribute changes accordingly. 我有一个图像滑块设置在图像类别被切换之间.above ， .active和.below ，和它们的top:属性相应地改变。

At the moment the toggle is activated by an event listener for up and down arrow key presses, and I have html, body { height: 100vh, overflow: hidden } so that the user can't scroll to the the images which are .below or .above . 目前切换由一个事件侦听器向上和向下箭头按键激活，而我html, body { height: 100vh, overflow: hidden } ，使用户无法滚动到它们的图像.below或者.above 。

Is there a way to still capture scroll up and down events and trigger the class changes using Javascript? 有没有办法仍然捕获向上和向下滚动事件并使用Javascript触发类更改？

I've tried this solution , but it isn't working - var st is undefined no matter what I do to the page, which I guess is because no scroll event is being captured and therefore var st is never declared. 我已经尝试过此解决方案，但是它不起作用-不管我对页面做什么，都不确定var st ，这是因为没有捕获滚动事件，因此从未声明var st 。

Thanks a lot! 非常感谢！

1 个解决方案

The body doesn't scroll, so there is no scroll event. 主体不会滚动，因此没有滚动事件。

Have a look at a different set of events: mousemove , touch . 看一下另一组事件： mousemove ， touch 。 Support for touch events can be rather varied across devices, so perhaps a library like Hammer would also come in handy. 对触摸事件的支持在各个设备上可能会有所不同，因此也许像Hammer这样的库也会派上用场。