如何正确地 "dispatchEvent" 一个 "wheel" 事件？
How to "dispatchEvent" a "wheel" event properly?
我有 2 个段落，我用 CSS 设置了它们的样式，使它们具有垂直滚动条。
当我在一个段落框上向上或向下滚动时，我希望滚动事件也发生在另一个段落框上。
我做了很多研究，也阅读了很多关于滚轮和滚动事件的问题。
这是我的代码：
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>
事件没有调度，也没有任何反应。
手动调度事件可以触发关联的事件侦听器，但我认为在这种情况下它们不能用于触发实际的内容滚动。
内容滚动发生后，将调度滚动事件。滚动事件不会导致内容滚动，它是由它产生的。
更简单的方法是手动测量和设置相关元素的 scrollTop 值：
<script>
document.onload = function(){
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
p1.addEventListener("scroll", function(e){
p2.scrollTop = p1.scrollTop;
});
}
</script>
请注意，您还应该使用 scroll 事件，而不是 wheel，因为除了鼠标滚轮之外，还有其他滚动内容框的方法，即使用键盘。
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>
我有 2 个段落，我用 CSS 设置了它们的样式，使它们具有垂直滚动条。
当我在一个段落框上向上或向下滚动时，我希望滚动事件也发生在另一个段落框上。
我做了很多研究，也阅读了很多关于滚轮和滚动事件的问题。
这是我的代码：
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>
事件没有调度，也没有任何反应。
手动调度事件可以触发关联的事件侦听器，但我认为在这种情况下它们不能用于触发实际的内容滚动。
内容滚动发生后，将调度滚动事件。滚动事件不会导致内容滚动，它是由它产生的。
更简单的方法是手动测量和设置相关元素的 scrollTop 值：
<script>
document.onload = function(){
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
p1.addEventListener("scroll", function(e){
p2.scrollTop = p1.scrollTop;
});
}
</script>
请注意，您还应该使用 scroll 事件，而不是 wheel，因为除了鼠标滚轮之外，还有其他滚动内容框的方法，即使用键盘。
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>