Javascript 同步卷轴

我正在做一个2个分区的同时滚动，当用户滚动1号分区时，另一个分区伴随。代码正在运行，但滚动速度非常慢。有什么建议吗？下面是我的代码

var elems=document.getElementsByClassName（“容器”）；
函数foo（）{
var top=this.scrollTop；
对于（i=0；i

.container{
高度：400px；
溢出y：滚动；
宽度：200px；
背景：红色；
浮动：左；
}
.集装箱{
背景颜色：橙色；
位置：固定；
}
.集装箱.固定跨度{
宽度：计算（100%-50px）；
利润率：25px；
背景色：黑色；
高度：100px；
显示：块；
}
.集装箱，正常{
左边距：220px；
宽度：800px；
}
.集装箱.正常跨度{
宽度：300%；
利润率：25px；
背景色：黑色；
高度：100px；
显示：块；
}

应该可以

var elems=document.getElementsByClassName（“容器”）；
var-state=0；
函数foo（）{
常量元素=[…元素]；
const scrolled=elements.find（elem=>elem.scrollTop！==scrollState）；
如果（滚动）{
const newTop=scrolled.scrollTop；
elements.forEach（element=>{
element.scrollTop=newTop；
});
scrollState=newTop；
}
}
设置间隔（foo，30）
.container{
高度：400px；
溢出y：滚动；
宽度：200px；
背景：红色；
浮动：左；
}
.集装箱{
背景颜色：橙色；
位置：固定；
}
.集装箱.固定跨度{
宽度：计算（100%-50px）；
利润率：25px；
背景色：黑色；
高度：100px；
显示：块；
}
.集装箱，正常{
左边距：220px；
宽度：800px；
}
.集装箱.正常跨度{
宽度：300%；
利润率：25px；
背景色：黑色；
高度：100px；
显示：块；
}

应该可以


var elems=document.getElementsByClassName（“容器”）；
var-state=0；
函数foo（）{
常量元素=[…元素]；
const scrolled=elements.find（elem=>elem.scrollTop！==scrollState）；
如果（滚动）{
const newTop=scrolled.scrollTop；
elements.forEach（element=>{
element.scrollTop=newTop；
});
scrollState=newTop；
}
}
设置间隔（foo，30）
.container{
高度：400px；
溢出y：滚动；
宽度：200px；
背景：红色；
浮动：左；
}
.集装箱{
背景颜色：橙色；
位置：固定；
}
.集装箱.固定跨度{
宽度：计算（100%-50px）；
利润率：25px；
背景色：黑色；
高度：100px；
显示：块；
}
.集装箱，正常{
左边距：220px；
宽度：800px；
}
.集装箱.正常跨度{
宽度：300%；
利润率：25px；
背景色：黑色；
高度：100px；
显示：块；
}
滚动显示不正常的原因不是因为节流问题。这是因为当您从
.container
元素触发scroll事件时，它实际上会同时尝试设置自己的scrollTop。您应该只在未被主动滚动的元素上设置scrollTop

为此，请不要使用
e.preventDefault（）
，因为这样可以完全防止任何滚动。您只需在
for
循环中添加一个
if
子句，检查当前迭代的元素是否是触发事件的元素，即：

if (elems[i] === this) {
    elems[i].scrollTop = top;
}

另外，由于您无意阻止scroll事件的发生，因此在绑定事件侦听器时，我会：

elems[i].addEventListener("scroll", foo, { passive: true });

请参见概念验证示例：


var elems=document.getElementsByClassName（“容器”）；
函数foo（）{
var top=this.scrollTop；
对于（i=0；i

.container{
高度：400px；
溢出y：滚动；
宽度：200px；
背景：红色；
浮动：左；
}
.集装箱{
背景颜色：橙色；
位置：固定；
}
.集装箱.固定跨度{
宽度：计算（100%-50px）；
利润率：25px；
背景色：黑色；
高度：100px；
显示：块；
}
.集装箱，正常{
左边距：220px；
宽度：800px；
}
.集装箱.正常跨度{
宽度：300%；
利润率：25px；
背景色：黑色；
高度：100px；
显示：块；
}
滚动显示不正常的原因不是因为节流问题。这是因为当您从
.container
元素触发scroll事件时，它实际上会同时尝试设置自己的scrollTop。您应该只在未被主动滚动的元素上设置scrollTop

为此，请不要使用
e.preventDefault（）
，因为这样可以完全防止任何滚动。您只需在
for
循环中添加一个
if
子句，检查当前迭代的元素是否是触发事件的元素，即：

if (elems[i] === this) {
    elems[i].scrollTop = top;
}

另外，由于您无意阻止scroll事件的发生，因此在绑定事件侦听器时，我会：

elems[i].addEventListener("scroll", foo, { passive: true });

请参见概念验证示例：


var elems=document.getElementsByClassName（“容器”）；
函数foo（）{
var top=this.scrollTop；
对于（i=0；i