<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
.container {
height: 30vh;
margin: 3rem;
overflow-y: scroll;
}
.container-1 {
background-color: #E6E6FA;
}
.container-2 {
background-color: #E6FAE6;
}
.content-1 {
height: 70vh;
}
.content-2 {
height: 150vh;
}
</style>
<div class="container container-1">
<div class="content content-1"></div>
</div>
<div class="container container-2">
<div class="content content-2"></div>
</div>
</body>
</html>
之前网上一直没找到能计算当前滚动条位置和滚轴高度百分比的写法
需求是这样的, 上述实现两个div的滚动条百分比位置同步, 也就是说, 当container-1滚动条滚动到50%时, container-2也要一起滚到50%, 类似于思否平台的文章编辑器
左边的内容高度是
70
,右边内容是150
,可视区域30
那么左边的可滚动距离就是
70-30=40
,右边是150-30=120
监听左边的已滚动距离
h
,那么就应该设置右边的已滚动距离为(h/40)*120
好像就可以了?