阅读提示：本文共计约5629个文字，预计阅读时间需要大约15分钟，由作者wps超级会员一天编辑整理创作于2023年11月06日13时23分08秒。
要实现两个滚动条的联动效果，可以使用JavaScript和HTML DOM操作来实现。以下是一个简单的示例，展示了如何实现这种效果：
- 在HTML中创建两个滚动条元素，并为其分配唯一的ID，以便在JavaScript中引用它。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Scrollbars</title>
</head>
<body>
<div id="container">
<div id="innerScrollbar"></div>
<div id="outerScrollbar"></div>
</div>
<script src="script.js"></script>
</body>
</html>
- 接下来，在名为
script.js的单独JavaScript文件中，编写以下代码以实现滚动条联动功能：
document.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('container');
const innerScrollbar = document.getElementById('innerScrollbar');
const outerScrollbar = document.getElementById('outerScrollbar');
// 设置内层滚动条的高度和外层滚动条的高度相同
innerScrollbar.style.height = `${outerScrollbar.offsetHeight}px`;
// 当内层滚动条滚动到底部时，外层滚动条自动滚动到底部
innerScrollbar.addEventListener('scroll', () => {
const innerScrollTop = innerScrollbar.scrollTop;
const maxScrollTop = innerScrollbar.scrollHeight - innerScrollbar.offsetHeight;
if (innerScrollTop >= maxScrollTop) {
outerScrollbar.scrollTop = outerScrollbar.scrollHeight;
}
});
// 当外层滚动条滚动到底部时，内层滚动条自动滚动到底部
outerScrollbar.addEventListener('scroll', () => {
const outerScrollTop = outerScrollbar.scrollTop;
const maxScrollTop = outerScrollbar.scrollHeight - outerScrollbar.offsetHeight;
if (outerScrollTop >= maxScrollTop) {
innerScrollbar.scrollTop = innerScrollbar.scrollHeight;
}
});
});
这个示例中的代码实现了两个滚动条之间的联动效果：当内层滚动条滚动到底部时，外层滚动条会自动滚动到底部；同样，当外层滚动条滚动到底部时，内层滚动条也会自动滚动到底部。
