记录–组件库的 Table 组件表头表体是如何实现同步滚动？

// use-scroll.ts function handleTableHeaderScroll (): void {     // 判断当前滚动的部分是不是表头，scrollPartRef 值为 head 或 body     if (scrollPartRef.value === 'head') {     // beforeNextFrameOnce 的作用是每一帧只调用一次传入的回调     // syncScrollState 的作用是同步滚动表体和一些样式设置       beforeNextFrameOnce(syncScrollState)     }   }

/**  * Naive UI DataTable 组件滚动同步 demo 实现  */ <template>   <div class="wrap">     <p>scrollPart：{{ scrollPartRef }}</p>     <div       ref="headerRef"       class="header"       @mouseenter="handleHeaderMouseenter"       @mouseleave="handleHeaderMouseleave"       @scroll="handleHeaderScroll"     >       <div class="content" tabIndex="-1">         head-head-head-head-head-head-head-head-head-head-head-head-head-head-head-head-head-head-head-head-head-head-head       </div>     </div>     <div       ref="bodyRef"       class="body"       @mouseenter="handleBodyMouseenter"       @scroll="handleBodyScroll"     >       <div class="content" tabIndex="-1">         body-body-body-body-body-body-body-body-body-body-body-body-body-body-body-body-body-body-body-body-body-body-body       </div>     </div>   </div> </template> <script setup lang="ts"> import { defineComponent, ref } from "vue";  const scrollPartRef = ref(); // 当前滚动部分，值为 'head' 或 'body' const headerRef = ref(); const bodyRef = ref();  function handleHeaderScroll() {   if (scrollPartRef.value === "head") {     syncScrollState();   } }  function handleBodyScroll() {   if (scrollPartRef.value === "body") {     syncScrollState();   } } // 同步滚动 let scrollLeft = 0; function syncScrollState() {   if (scrollPartRef.value === "head") {     scrollLeft = headerRef.value.scrollLeft;     bodyRef.value.scrollLeft = scrollLeft;   } else {     scrollLeft = bodyRef.value.scrollLeft;     headerRef.value.scrollLeft = scrollLeft;   } }  function handleHeaderMouseenter() {   scrollPartRef.value = "head"; } function handleHeaderMouseleave() {   scrollPartRef.value = "body"; } function handleBodyMouseenter() {   scrollPartRef.value = "body"; } </script> <style> .wrap {   width: 600px; } .content {   width: 1000px;   height: 80px;   background-color: lightblue; } .header {   padding: 10px;   background-color: lightgray;   overflow: auto;   margin-bottom: 20px; } .body {   padding: 10px;   background-color: lightgray;   overflow: auto; } .content {   border: 1px solid orange; } </style>

怎么判断滚动结束？

我们需要在每一次滚动结束后置空 scrollPartRef，否则同步会出问题。被动滚动部分在被设置 scrollLeft 时也会触发 scroll 事件，而被动滚动部分的 scroll 事件会晚于主动滚动的 scroll 事件触发，所以可以认为被动滚动事件执行完滚动就结束了，在它的事件回调处理中的 else 分支置空 scrollPartRef ，如上代码所示。

但是这样判断结束在 Safari 中还是有点有问题的，详见下面遗留问题。

完整代码

Demo 在线地址：[Fix] NaiveUI-DataTable-scrolling-sync (demo) - codesandbox

<template>   <div class="wrap">     <p>scrollPart：{{ scrollPart }}</p>     <div ref="headerRef" class="header" @scroll="handleHeaderScroll">       <div class="content" tabIndex="-1">         head-head-head-head-head-head-head-head-head-head-head-head-head-head-head-head-head-head-head-head-head-head-head       </div>     </div>     <div ref="bodyRef" class="body" @scroll="handleBodyScroll">       <div class="content" tabIndex="-1">         body-body-body-body-body-body-body-body-body-body-body-body-body-body-body-body-body-body-body-body-body-body-body       </div>     </div>   </div> </template>  <script setup lang="ts"> import { ref } from 'vue'  const scrollPart = ref() // 当前主动滚动部分 const headerRef = ref()  function handleHeaderScroll() {   if (scrollPart.value !== 'body') {     console.log('<<< head scroll start >>>')     syncScrollState()   } else {     scrollPart.value = undefined     console.log('<<< body scroll end >>>')     console.log('n')   } }  const bodyRef = ref() function handleBodyScroll() {   if (scrollPart.value !== 'head') {     console.log('<<< body scroll start >>>')     syncScrollState()   } else {     scrollPart.value = undefined     console.log('<<< head scroll end >>>')     console.log('n')   } }  let lastScrollLeft = 0 function syncScrollState() {  // 取 header 的 scrollLeft 跟上一次滚动记录的 scrollLeft 比较   const directionHead = lastScrollLeft - headerRef.value.scrollLeft  // 不为 0 说明 header 滚动了，主动滚动即为 head，否则为 body   scrollPart.value = directionHead !== 0 ? 'head' : 'body'   if (scrollPart.value === 'head') {     lastScrollLeft = headerRef.value.scrollLeft     bodyRef.value.scrollLeft = lastScrollLeft   } else {     lastScrollLeft = bodyRef.value.scrollLeft     headerRef.value.scrollLeft = lastScrollLeft   }   console.log('final scrollLeft', lastScrollLeft) } </script>  <style> .wrap {   width: 600px; } .content {   width: 1000px;   height: 80px;   background-color: lightblue; } .header {   padding: 10px;   background-color: lightgray;   overflow: auto;   margin-bottom: 20px; } .body {   padding: 10px;   background-color: lightgray;   overflow: auto; } .content {   border: 1px solid orange; } </style>

本文转载于:

https://juejin.cn/post/7251786381483376695

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。