js如何实现两个div里的滚动条同步滚动?

作者站长头像
站长
· 阅读数 13
<!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%, 类似于思否平台的文章编辑器

js如何实现两个div里的滚动条同步滚动?

回复
1个回答
avatar
test
2024-07-16

左边的内容高度是70，右边内容是150，可视区域30那么左边的可滚动距离就是70-30=40，右边是150-30=120监听左边的已滚动距离h，那么就应该设置右边的已滚动距离为(h/40)*120好像就可以了？

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容