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

<!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%, 类似于思否平台的文章编辑器

image.png

阅读 2.9k
2 个回答

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

写过一个类似的,你可以参考下

handleScroll () { // 滚动事件
      const editContentWrapper = this.$refs.editContentWrapper
      const previewContentWrapper = this.$refs.previewContentWrapper
      const editScroll = editContentWrapper.scrollTop
      const previewScroll = previewContentWrapper.scrollTop
      const editScrollMax = editContentWrapper.scrollHeight - editContentWrapper.offsetHeight
      const previewScrollMax = previewContentWrapper.scrollHeight - previewContentWrapper.offsetHeight
      if (this.scrollType === 'edit') {
        previewContentWrapper.scrollTop = previewScrollMax * (editScroll / editScrollMax)
      } else if (this.scrollType === 'preview') {
        editContentWrapper.scrollTop = editScrollMax * (previewScroll / previewScrollMax)
      }
    }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题