Darse cuenta de la vinculación cuando se deslizan dos divs (deslice cualquiera, el otro seguirá)

sección HTML

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

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

Parte 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)
}

Supongo que te gusta

Origin blog.csdn.net/weixin_40639095/article/details/131856457
Recomendado
Clasificación