js DIV联动脚本问题

Question

现在页面上有两个DIV（如图）
我这想实现div滚动条联动，如何实现

Answer 1

【以下回答由 GPT 生成】

问题解答如下:

要实现两个DIV滚动条的联动，可以使用JavaScript来监听其中一个DIV的滚动事件，然后通过设置另一个DIV的scrollTop属性来实现联动效果。

首先，我们需要给两个DIV元素添加ID属性，方便通过JavaScript来操作它们。在给DIV元素添加ID属性之后，可以编写如下的JavaScript代码来实现联动效果:

// 获取两个DIV元素
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');

// 监听div1的滚动事件
div1.addEventListener('scroll', function() {
  // 设置div2的scrollTop属性和div1的scrollTop属性一致
  div2.scrollTop = div1.scrollTop;
});

上述代码中，我们首先通过getElementById方法获取了id为div1和div2的两个DIV元素，然后通过addEventListener方法给div1添加了一个scroll事件监听器。当div1发生滚动时，监听器中的回调函数会被触发，我们在回调函数中将div2的scrollTop属性设置为div1的scrollTop属性，从而实现了联动效果。

将上述代码添加到页面中的script标签内，或者将其保存到一个单独的.js文件中，然后在页面上引入该脚本文件。这样就可以实现两个DIV滚动条的联动了。

如果你对JavaScript不熟悉，可以参考上述代码，然后将其复制粘贴到你的项目中，根据你的具体情况做一些适当的调整即可。

【相关推荐】

• 你可以看下这个问题的回答https://ask.csdn.net/questions/831216
• 这篇博客你也可以参考下：js实现页面飘窗，div图片飘动
• 您还可以看一下 徐照兴老师的JavaScript编程入门实战精讲课程中的 动⼿操作DIV的任意样式小节, 巩固相关知识点
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^