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
}
3.效果
类似csdn,md这种左右滚动条联动的效果