实现两个div滑动时联动（滑动任意一个，其他一个跟着动）

最新推荐文章于 2023-08-18 11:59:45 发布

史一试

最新推荐文章于 2023-08-18 11:59:45 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_40639095/article/details/131856457

该文章讲述了如何使用JavaScript处理两个div元素的滚动事件，确保它们的滚动同步。通过设置和清除定时器，以及在滚动事件中临时禁用对方的滚动事件，实现了滚动幅度的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML 部分

<div ref="nameListRef" @scroll="tempLeftMethod"> 内容部分自己定义 </div>

<div ref="scrollRef" @scroll="tempRihghtMethod"> 内容部分自己定义 </div>

JS 部分

let tempLeftMethod = namesScroll // 左边的事件
let tempRihghtMethod = eventsScroll // 右边的事件

const nameListRef = ref(null)
const scrollRef = ref(null)

let leftTimer = null
let rightTimer = null

function namesScroll() {
  // 1. 先删除右侧DIV的滚动事件，以免自动触发
  tempRihghtMethod = () => {}

  // 2. 正常设值，同步两个DIV的滚动幅度 behavior: 'smooth'
  try {
    scrollRef.value.scrollTo({ top: nameListRef.value.scrollTop })
  } catch (error) {}

  // 3. 延迟恢复（预约）另一个DIV的滚动事件，并将本预约返回给变量[timer]
  clearTimeout(leftTimer)
  leftTimer = setTimeout(() => (tempRihghtMethod = eventsScroll), 100)
}

function eventsScroll() {
  // 1. 先删除右侧DIV的滚动事件，以免自动触发
  tempLeftMethod = () => {}

  // 2. 正常设值，同步两个DIV的滚动幅度
  try {
    nameListRef.value.scrollTo({ top: scrollRef.value.scrollTop })
  } catch (error) {}

  // 3. 延迟恢复（预约）另一个DIV的滚动事件，并将本预约返回给变量[timer]
  clearTimeout(rightTimer)
  rightTimer = setTimeout(() => (tempLeftMethod = namesScroll), 100)
}