js_控制两个滚动条同时滚动

最新推荐文章于 2024-07-20 13:48:02 发布

前端小菜鸡yy

最新推荐文章于 2024-07-20 13:48:02 发布

阅读量604

点赞数

分类专栏： Js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_45104829/article/details/132358958

版权

Js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.html结构

 <div class="res_left"  id="scrollLeft" @scroll="scrollL"></div>
 <div class="res_right"  id="scrollRight" @scroll="scrollR"></div>

2.js代码

const scrollL = () =>{
    const scroll1 = document.querySelector('#scrollLeft')
    const scroll2 = document.querySelector('#scrollRight')
    const ratio = scroll2!.scrollHeight / scroll1!.scrollHeight
    scroll2!.scrollTop = scroll1!.scrollTop*ratio 
}

const scrollR = () =>{
    const scroll1 = document.querySelector('#scrollLeft')
    const scroll2 = document.querySelector('#scrollRight')
    const ratio = scroll1!.scrollHeight / scroll2!.scrollHeight
    scroll1!.scrollTop = scroll2!.scrollTop*ratio
 }