请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
实现滚动同步使用到的属性：
1. Element.scrollTop - 可读写属性，可以获取或设置元素内容从其顶部边缘滚动的像素数。
2. Element.scrollHeight - 只读属性，是一个元素内容高度，包括由于溢出导致的视图中不可见内容。
3. Element.clientHeight - 只读属性，对于没有定义 CSS 或者内联布局盒子的元素为 0；否则，它是元素内部的高度（以像素为单位），包含内边距，但不包括边框、外边距和水平滚动条（如果存在）。
实现思路：
1. 获取滚动元素当前滚动位置（scrollTop）和元素内容高度（scrollHeight - clientHeight）的比例；
2. 将上述比例值应用于第二个元素，即根据此元素自己的滚动条实际高度计算出 scrollTop 属性值并驱动该值刷新。
同时应考虑到滚动事件是高发事件，可以设计一个滚动机制以减少CPU消耗，详见代码示例。
<style>
/* 父元素 */
.pa {
margin: 20px auto;
width: 80vw;
height: 90vh;
display: flex;
gap: 20px;
}
/* 子元素 */
.son {
width: 50%;
height: 100%;
border: 1px solid #ccc;
overflow: auto;
}
/* 孙元素 */
.grandson {
height: 300%;
background: linear-gradient(35deg, tan, beige, snow, beige, tan);
}
</style>
<div class="pa">
<div id="son1" class="son">
<div class="grandson"></div>
</div>
<div id="son2" class="son">
<div class="grandson"></div>
</div>
</div>
<script>
let isScrolling = false; // 同步滚动逻辑
son1.addEventListener('scroll', () => scrolling(son1, son2));
son2.addEventListener('scroll', () => scrolling(son2, son1));
/* 滚动函数 */
function scrolling(el1, el2) {
if (isScrolling) return;
isSScrolling = true;
const per = el1.scrollTop / (el1.scrollHeight - el1.clientHeight);
el2.scrollTop = per * (el2.scrollHeight - el2.clientHeight);
setTimeout(() => isScrolling = false, 10);
}
</script>
| 
发表于 2026-3-4 12:06
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2026-3-4 16:34
发表于 2026-3-4 18:19
