Javascript 强制其他div在“我的方向盘”上滚动`

在下面的代码片段中，我必须

div

s。当我尝试滚动其中任何一个时，我想同步它们的位置。当第二个div被滚动时，我正在更改第一个div的

transform

，它就工作了。但是第一个div永远不会滚动。我试图将

mouseweel

事件传递给第二个，但没有成功

我不能使

部分
可滚动-这只是一个简化的示例


//此代码有效
//`.labels`与`.scrollable的滚动条一起移动`
document.querySelector（“.scrollable”）.addEventListener（'scroll'，函数（e）{
var dy=this.scrollTop；
document.querySelector（“.labels”）.style.transform=“translateY”（+-dy+“px）”；
});
//此代码不起作用
//我想在尝试滚动`.标签时滚动`.scrollable``
document.querySelector（“.labels”）.addEventListener（'wheel'，函数（e）{
console.log（Date.now（））；
document.querySelector（“.scrollable”）.dispatchEvent（新的MouseEvent（e.type，e））；
});
部分{
边框：1px纯红；
线高：2米；
高度：8em；
显示：内联块；
溢出：隐藏；
空白：nowrap；
}
div{
显示：内联块；
垂直对齐：顶部；
填充：0.25em；
}
.可滚动{
最大高度：100%；
溢出：自动；
}
.标签{
背景：银；
}
.as-console-wrapper.as-console-wrapper{
最大高度：70像素；
}

标签1

标签2

标签3

标签4

标签5

标签6

标签7

第1行

第2行

第3行

第4行

第5行

第6行

第7行

[编辑]
如果你想在Firefox上使用<代码>鼠标滚轮< /代码>事件，请考虑阅读另一个这样的问题：

[编辑2]
如果要对代码段进行新的编辑，请检查上面的注释以了解上下文


css存在一个问题，您需要
标签
元素可滚动，要在两个元素之间同步滚动，只需使用
滚动顶部

我对您的示例进行了修改，使其生效：


var scrollableEl=document.querySelector（“.scrollable”）；
var labelsEl=document.querySelector（“.labels”）；
scrollableEl.addEventListener（'scroll'，函数（e）{
labelsEl.style.transform=`translateY（${-scrollableEl.scrollTop}px）`；
e、 预防默认值（）；
});
labelsEl.addEventListener（'wheel'，函数（e）{
scrollableEl.scrollTop+=（e.deltaY/2）；
e、 预防默认值（）；
});
部分{
边框：1px纯红；
线高：2米；
高度：8em；
显示：内联块；
溢出：隐藏；
空白：nowrap；
}
div{
显示：内联块；
垂直对齐：顶部；
填充：0.25em；
}
.可滚动{
最大高度：100%；
溢出：自动；
}
.标签{
背景：银；
}
.as-console-wrapper.as-console-wrapper{
最大高度：70像素；
}

标签1

标签2

标签3

标签4

标签5

标签6

标签7

第1行

第2行

第3行

第4行

第5行

第6行

第7行

[编辑]
如果你想在Firefox上使用<代码>鼠标滚轮< /代码>事件，请考虑阅读另一个这样的问题：

[编辑2]
如果要对代码段进行新的编辑，请检查上面的注释以了解上下文


css存在一个问题，您需要
标签
元素可滚动，要在两个元素之间同步滚动，只需使用
滚动顶部

我对您的示例进行了修改，使其生效：


var scrollableEl=document.querySelector（“.scrollable”）；
var labelsEl=document.querySelector（“.labels”）；
scrollableEl.addEventListener（'scroll'，函数（e）{
labelsEl.style.transform=`translateY（${-scrollableEl.scrollTop}px）`；
e、 预防默认值（）；
});
labelsEl.addEventListener（'wheel'，函数（e）{
scrollableEl.scrollTop+=（e.deltaY/2）；
e、 预防默认值（）；
});
部分{
边框：1px纯红；
线高：2米；
高度：8em；
显示：内联块；
溢出：隐藏；
空白：nowrap；
}
div{
显示：内联块；
垂直对齐：顶部；
填充：0.25em；
}
.可滚动{
最大高度：100%；
溢出：自动；
}
.标签{
背景：银；
}
.as-console-wrapper.as-console-wrapper{
最大高度：70像素；
}

标签1

标签2

标签3

标签4

标签5

标签6

标签7

第1行

第2行

第3行

第4行

第5行

第6行

第7行

这是
CSS
唯一的解决方案。。看看@CSS面板，如果你能把它应用到你周围的环境中，它很简单

我们只将
元素向左移动

margin-left: -60px;
padding-left: 60px;


//此代码有效
//`.labels`与`.scrollable的滚动条一起移动`
document.querySelector（“.scrollable”）.addEventListener（'scroll'，函数（e）{
var dy=this.scrollTop；
document.querySelector（“.labels”）.style.transform=“translateY”（+-dy+“px）”；
});
部分{
边框：1px纯红；
线高：2米；
高度：8em；
显示：内联块；
溢出：隐藏；
}
div{
显示：内联块；
垂直对齐：顶部；
填充：0.25em；
框大小：边框框；
位置：相对位置；
}
.可滚动{
最大高度：100%；
溢出：自动；
左边距：-60px；
左侧填充：60px；
}
.标签{
背景：银；
}
.as-console-wrapper.as-console-wrapper{
最大高度：70像素；
}

标签1

标签2

标签3

标签4

标签5

标签6

标签7

第1行

第2行

第3行

第4行

第5行

第6行

第7行

这是
CSS
唯一的解决方案。。看看@CSS面板，如果你能把它应用到你的sur中，它很简单