查看此处可用的项目:https://github.com/vuejs/awesome-vue#scroll 看起来 vue-scroll-sync 就是这么做的。
更新:尝试了一段时间后,我没有让它正常工作......
这就是我走了多远但没有成功
<template>
<div style="display: flex">
<scroll-sync :vertical="true">
<div
style="width: 100px; height: 600px; overflow: auto; background: teal"
>
Nam id faucibus turpis. Sed in ex gravida lorem tincidunt posuere. Cras
id velit ac diam pretium cursus. Aliquam sagittis magna non ante
vehicula, ac venenatis leo consequat. Fusce blandit, enim sit amet
scelerisque lobortis, neque ex cursus velit, sed sodales urna nibh
tempor urna. Aliquam erat volutpat. Nam sit amet arcu at mauris
fringilla accumsan sit amet ac mi. Mauris consectetur est ligula, eu
tristique nibh sollicitudin in. Sed malesuada neque ut ante ultrices
malesuada. Curabitur imperdiet neque quis est sodales, id pellentesque
nibh eleifend. Maecenas cursus, nibh vitae congue accumsan, nisl lectus
pharetra dolor, a ornare diam purus at metus. Vestibulum porta, quam
eget venenatis hendrerit, massa tortor faucibus arcu, ac pellentesque
felis mi et quam. Etiam sollicitudin pretium diam, at fringilla velit
gravida ut. Vestibulum a felis at sapien rutrum fringilla. Donec eu
viverra enim. Etiam consectetur elit non nibh ornare blandit. Curabitur
ultrices ante quis ipsum efficitur sodales. Sed porttitor lorem vitae
ipsum volutpat eleifend. Cras libero nisl, porta sit amet maximus ac,
finibus id risus.
</div>
</scroll-sync>
<scroll-sync :vertical="true">
<div style="width: 100px; height: 300px; overflow: auto; background: red">
Nam id faucibus turpis. Sed in ex gravida lorem tincidunt posuere. Cras
id velit ac diam pretium cursus. Aliquam sagittis magna non ante
vehicula, ac venenatis leo consequat. Fusce blandit, enim sit amet s
nibh eleifend. Maecenas cursus, nibh vitae congue accumsan, nisl lectus
pharetra dolor, a ornare diam purus at metus. Vestibulum porta, quam
eget venenatis hendrerit, massa tortor faucibus arcu, ac pellentesque
felis mi et quam. Etiam sollicitudin pretium diam, at fringilla velit
gravida ut. Vestibulum a felis at sapien rutrum fringilla. Donec eu
viverra enim. Etiam consectetur elit non nibh ornare blandit. Curabitur
ultrices ante quis ipsum efficitur sodales. Sed porttitor lorem vitae
ipsum volutpat eleifend. Cras libero nisl, porta sit amet maximus ac,
finibus id risus.
</div>
</scroll-sync>
</div>
</template>
<script>
export default {
components: {
[process.client && 'ScrollSync']: () => import('vue-scroll-sync'),
},
}
</script>
由于维护者没有更多详细信息,我不知道如何更好地联系他。
TLDR:不幸的是,我想有人需要手动实现该功能。