How to "dispatchEvent" a "wheel" event properly?

Question

I have 2 paragraphs, I styled them with CSS in a way that they would have vertical scrollbars.

When I wheel up or down on one paragraph box, I want the wheel event to also happen on the other paragraph box.

I've done a lot of research and I've read a lot of questions regarding wheel and scroll events.

Here's my code:

document.onload = function() {
  document.getElementById("p1").addEventListener("wheel", function(e) {
    var n = new Event("wheel");
    n.deltaY = e.deltaY;
    p2.dispatchEvent(n);
  });
}

p {
  width: 200px;
  height: 200px;
  overflow: auto;
}

<p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros in cursus turpis massa. Libero id faucibus
nisl tincidunt eget nullam non. Donec et odio pellentesque diam. Consequat ac felis donec et odio pellentesque.
Pellentesque id nibh tortor id aliquet lectus proin. Dolor sed viverra ipsum nunc aliquet bibendum enim
facilisis. Sed vulputate odio ut enim blandit. Erat nam at lectus urna duis convallis convallis. Ipsum dolor sit
amet consectetur adipiscing elit. Mattis molestie a iaculis at erat. Risus sed vulputate odio ut. Neque egestas
congue quisque egestas diam in arcu cursus euismod. Blandit massa enim nec dui. Orci nulla pellentesque
dignissim enim sit.

Aliquam purus sit amet luctus. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Vehicula ipsum a arcu
cursus vitae congue mauris rhoncus. Amet dictum sit amet justo. Semper auctor neque vitae tempus quam
pellentesque nec nam aliquam. Viverra nam libero justo laoreet sit amet. Porta lorem mollis aliquam ut
porttitor. Cursus metus aliquam eleifend mi in nulla. Lorem ipsum dolor sit amet consectetur adipiscing elit
pellentesque. Malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et. Faucibus et
molestie ac feugiat sed lectus. Eget nunc lobortis mattis aliquam. Laoreet id donec ultrices tincidunt arcu non
sodales neque.</p>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros in cursus turpis massa. Libero id faucibus
nisl tincidunt eget nullam non. Donec et odio pellentesque diam. Consequat ac felis donec et odio pellentesque.
Pellentesque id nibh tortor id aliquet lectus proin. Dolor sed viverra ipsum nunc aliquet bibendum enim
facilisis. Sed vulputate odio ut enim blandit. Erat nam at lectus urna duis convallis convallis. Ipsum dolor sit
amet consectetur adipiscing elit. Mattis molestie a iaculis at erat. Risus sed vulputate odio ut. Neque egestas
congue quisque egestas diam in arcu cursus euismod. Blandit massa enim nec dui. Orci nulla pellentesque
dignissim enim sit.

Aliquam purus sit amet luctus. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Vehicula ipsum a arcu
cursus vitae congue mauris rhoncus. Amet dictum sit amet justo. Semper auctor neque vitae tempus quam
pellentesque nec nam aliquam. Viverra nam libero justo laoreet sit amet. Porta lorem mollis aliquam ut
porttitor. Cursus metus aliquam eleifend mi in nulla. Lorem ipsum dolor sit amet consectetur adipiscing elit
pellentesque. Malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et. Faucibus et
molestie ac feugiat sed lectus. Eget nunc lobortis mattis aliquam. Laoreet id donec ultrices tincidunt arcu non
sodales neque.</p>

The event doesn't dispatch and nothing happens.

jered · Accepted Answer · 2019-12-12T18:40:26.997

Manually dispatching events can trigger the associated event listeners, but I don't believe they can be used in this case to trigger an actual content scroll.

A scroll event is dispatched as a consequence of the content scroll happening. A scroll event does not cause the content scroll, it results from it.

An easier way is to just manually measure and set the scrollTop values of the relevant elements:

<script>
    document.onload = function(){
        var p1 = document.getElementById("p1");
        var p2 = document.getElementById("p2");
        p1.addEventListener("scroll", function(e){
            p2.scrollTop = p1.scrollTop;
        });
    }
</script>

Note you should also use the scroll event, not wheel, because there are other ways of scrolling a content box aside from the mouse wheel i.e. with the keyboard.

            var p1 = document.getElementById("p1");
            var p2 = document.getElementById("p2");
            p1.addEventListener("scroll", function(e){
                p2.scrollTop = p1.scrollTop;
            });

div {
  display: flex;
  flex-grow: 1;
  border: 1px solid black;
}

p {
  max-height: 100px;
  overflow: scroll;
}

<div><div><p id="p1">
Nulla sit amet est. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Nunc sed turpis. Vivamus laoreet.

Sed in libero ut nibh placerat accumsan. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam quis ante. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo.

Praesent blandit laoreet nibh. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Aenean imperdiet. Nulla porta dolor. Vestibulum ullamcorper mauris at ligula.

Nullam accumsan lorem in dui. Etiam sit amet orci eget eros faucibus tincidunt. Nulla consequat massa quis enim. In hac habitasse platea dictumst. Vivamus laoreet.

Donec id justo. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Donec mollis hendrerit risus. Fusce ac felis sit amet ligula pharetra condimentum. Vivamus consectetuer hendrerit lacus.
</p></div><div><p id="p2">
Nulla sit amet est. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Nunc sed turpis. Vivamus laoreet.

Sed in libero ut nibh placerat accumsan. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam quis ante. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo.

Praesent blandit laoreet nibh. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Aenean imperdiet. Nulla porta dolor. Vestibulum ullamcorper mauris at ligula.

Nullam accumsan lorem in dui. Etiam sit amet orci eget eros faucibus tincidunt. Nulla consequat massa quis enim. In hac habitasse platea dictumst. Vivamus laoreet.

Donec id justo. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Donec mollis hendrerit risus. Fusce ac felis sit amet ligula pharetra condimentum. Vivamus consectetuer hendrerit lacus.
</p></div></div>

Than kyou for your answer, but as I've said, I've done my research and read already a lot of questions regarding scroll and wheel events, I already am using this `document.getElementById("p2").scrollTo(0, document.getElementById("p1").scrollTop);` but I did ask this question nevertheless for learning purpose, I don't need a workaround. — Shayan, Dec 12 '19 at 18:22
Like I said in my answer, what you want does not seem to be possible. You can manually dispatch events but they can't scroll content and are mainly used to trigger event listeners. A scroll event is dispatched *as a consequence* of the content scroll happening. *A scroll events does not cause the content scroll*, it *results from* it. — jered, Dec 12 '19 at 18:33
Even if you clone the event exactly and redispatch it, it will not work the way you want (I tried). See https://stackoverflow.com/questions/11974262/how-to-clone-or-re-dispatch-dom-events — jered, Dec 12 '19 at 18:39
I understand now. Can you add that to your answer? Because that's what I was looking for — Shayan, Dec 12 '19 at 18:39
Actually I did even think about cloning it, I tried a for loop to copy all properties from the original event to the new Event. — Shayan, Dec 12 '19 at 18:40
Thanks very much again for that link, I also tried cloning and in the correct way: `var n = new WheelEvent("wheel", e);` — Shayan, Dec 12 '19 at 18:49

How to "dispatchEvent" a "wheel" event properly?

1 Answers1