javascript - 检测从iframe传播到父级的滚动事件(Detect propagated scroll event from iframe to parent)

Question

I would like to detect a scroll event on a Vimeo player iframe.

(我想在Vimeo播放器iframe上检测到滚动事件。)

I'm aware of the cross domain issues involved in this situation, so at first I thought this was just impossible.

(我知道与这种情况有关的跨域问题，因此起初我认为这是不可能的。)

But then I noticed when hovering over any embedded Vimeo player, the parent page still scrolls if the page is longer (vertical scrollbars) than the viewport.

(但是随后我注意到，将鼠标悬停在任何嵌入式Vimeo播放器上时，如果页面比视口更长（垂直滚动条），则父页面仍会滚动。)

So there is some kind of propagation I guess.

(因此，我猜测是某种传播。)

Also, I read in this topic that if an iframe can't scroll, the event gets propagated to the parent.

(另外，我在本主题中读到，如果iframe无法滚动，则事件会传播到父级。)

So there has to be a way to detect this I guess but how?

(因此，我必须找到一种方法来检测此情况，但是如何呢？)

Using monitorEvents() in the console also confirms that the Vimeo iframe steals all mouse events but does propagate the scroll event when using the mousewheel and the parent page is vertical scrollable.

(在控制台中使用monitorEvents（）还可确认Vimeo iframe会窃取所有鼠标事件，但在使用鼠标滚轮且父页面可垂直滚动时会传播滚动事件。)

I need this to maintain mousewheel scrolling when hovering a Vimeo player on a horizontal scrolling website.

(在水平滚动网站上悬停Vimeo播放器时，我需要此按钮来保持鼠标滚轮滚动。)

In this case the parent page is only scrollable in the horizontal direction and the scroll event does not fire.

(在这种情况下，父页面只能在水平方向滚动，并且不会触发滚动事件。)

Just right now I'm thinking of giving the body a huge height so it is always vertical scrollable.

(现在，我正在考虑给身体一个很大的高度，以便它始终可以垂直滚动。)

Then hiding the vertical scrollbars and setting an e.preventDefault on the scroll event.

(然后隐藏垂直滚动条，并在滚动事件上设置e.preventDefault。)

Then passing the scroll event to the horizontal scroller.

(然后将滚动事件传递给水平滚动器。)

Not very elegant, but maybe it will work.

(不是很优雅，但是也许可以。)

Any suggestions are welcome!

(欢迎任何建议！)

  ask by ferencvandervelde translate from so

Answer 1

等待大神答复