将鼠标滚轮/滚动事件从一个div转移到另一个div [英] Transfer a mousewheel/scroll event from one div to another

问题描述

我想知道是否可能和如何从标题传递鼠标滚轮/滚动事件(用户的滚动尝试)>到容器.

I would like to know if it's possible and how to transfer a mousewheel/scroll event (scroll attempt by a user) from the header to the container.

我有以下示例情况:

+------------+     +------------+|
|   header   |     |   header   ||
+------------+     +------------+|
|           ||     |            ||
|           ||     |            ||
| container ||     | container  ||
|           ||     |            ||
|           ||     |            ||
+------------+     +------------+|
 situation 1        situation 2

---

情况

---

情况2是传统"设置，可以在其中滚动整个页面.当光标悬停在标头上时(即使它可能是固定的)，滚动尝试也将传递到body/html.由于容器溢出了body/html，因此如果用户旋转鼠标滚轮，容器将移动/滚动.因为标头是固定的，所以它将保持在同一位置.

---

Situations

---

Situation 2 is the 'traditional' setup in which the complete page can be scrolled. When your cursor hovers the header (even though it might be fixed) the scroll attempt is passed along to the body/html. Since the container overflows the body/html the container will move/scroll if a user rotates his/her mousewheel. Because the header is fixed it will stay at the same position.

情况1是我的测试设置.容器的内容使容器溢出，这将导致容器显示滚动条.现在，我希望当用户的光标悬停在标题上并且用户旋转其滚轮时，容器也可以滚动.

Situation 1 is my test setup. The container's content overflows the container which will cause the container to show a scrollbar. Now i'd like for the container to also scroll when a user's cursor is hovering the header and the user rotates his/her scrollwheel.

情形1

情境2

我还创建了另一个小提琴，以显示我的解决方案所在的进展，只有我能不能正常工作.这可能会激励其他人获得实际的解决方案:)我收到错误:(index):69未捕获的InvalidStateError:无法在'EventTarget'上执行'dispatchEvent':事件已被调度.(目前，这只是Chrome中的滚动事件)

I've created another fiddle to show my progress in which may lie the solution, only I can't get it to work. This might inspire someone else to get the actual solution :) I get the error: (index):69 Uncaught InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched. (For now it's only the scroll event in chrome)

这与我基于其他解决方案2"的预期解决方案最接近.感谢Maksym Stepanenko的研究，似乎尚不可能.我暂时不回答这个问题，以防万一有人找到了一种方法:)

This comes closest to my expected solution which is based on 'Other Solution 2'. Thanks to Maksym Stepanenko's research it does not seem to be possible yet. I leave the question unanswered for now in case someone does find a method :)

这些问题是关于此问题的，但未提供我期望其工作方式的解决方案:

These questions talk about this issue but don't provide a solution for this setup the way I'd expect it to work:

1. 这没有帮助，因为标头没有放在容器上方，而是在上方. HTML&JavaScript-将滚动动作从一个元素传递到另一个元素

1. 接受的答案不会传输事件，而只是设置scrollTop.这不是浏览器在滚动时提供的行为.当将鼠标悬停在元素上或正常执行滚动时，您可以清楚地看到jsFidle中滚动发生方式的不同.浏览器使滚动平滑，scrollTop只是设置使其休克"的值.但是，除了休克"部分外，这与我想要的行为非常接近！通过固定内容传递鼠标滚轮事件

推荐答案

我最终也需要此功能.

如果您正在收听"wheel"事件，则可以获得有关滚动的"delta"信息.然后，您只需将增量应用于目标div.

If you're listening to the "wheel" event, you can get "delta" info about the scrolling. Then you can simply apply the delta to your target div.

document.addEventListener('DOMContentLoaded', function() {
  const target = document.querySelector('#container');

  // listen on the whole document; you could restrict this to an element though
  document.addEventListener('wheel', function(event) {
    target.scrollTop += event.deltaY;
  });
});

不过，我还没有在移动设备上对此进行过测试，我怀疑它在那里无法正常工作.

I haven't tested this on mobile, though, and I suspect it wouldn't work there.

这篇关于将鼠标滚轮/滚动事件从一个div转移到另一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！