视图区域过大，通过鼠标滑动来实现区域滑动

我爱lol

已于 2023-05-12 15:24:22 修改

阅读量214

点赞数 1

分类专栏： vue el-table 文章标签： html css 前端

于 2023-05-12 15:21:41 首次发布

本文链接：https://blog.csdn.net/m0_56895352/article/details/130642303

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

el-table

1 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue3中处理一个横向滚动的表格，通过监听鼠标事件并计算鼠标移动的偏移量，动态控制表格滚动条进行左右滚动，实现平滑的滚动效果。代码示例展示了从获取表格DOM元素到添加和移除事件监听器的完整过程。

摘要由CSDN通过智能技术生成

一个页面的一小个区域，很大，不是纵向页面，而是横向页面，滚动条在最下方，一般情况下不会滚动到最下方去滚动那个横向的滚动条，而是直接通过鼠标滑动就可以实现左滚动和右滚动，实际上就是通过操作整个区域下方的滚动条来操作的，下面先看看页面：

这里紫色的页面是一个el-table表格，这里是使用的overflow:hidden,右边还有区域没有显示。

下面来看代码实现：

1.首先拿到表格整个dom元素

 const templateTable = ref<any>(null)

在vue3中推荐的方式是ref定义数据后暴露出去，名称与绑定的ref名称一致

2.这里也是用到了拖拽用的三个鼠标事件

el-table的滚动条是bodyWrapper,先判断滚动条是否存在，如果存在则说明区域过大，先检测鼠标按下事件,后调用鼠标移动事件

//记录上次鼠标所在的位置
    const lastMousePos = ref<number>(0)
    const mouseControlScroll = () => {
      let dom = templateTable.value.bodyWrapper
      if (dom && !isMobile.value) {
        templateTable.value.$el.addEventListener(
          'mousedown',
          mouseDownReadyScroll
        )
      }
    }

 const mouseDownReadyScroll = (e) => {
      lastMousePos.value = e.clientX
      templateTable.value.$el.addEventListener('mousemove', mouseMoveToScroll)
      templateTable.value.$el.addEventListener('mouseup', mouseUpToStop)
    }

下面是重点，鼠标移动时，通过上次mousedown记录的鼠标位置，和移动的位置，进行差值计算，获得偏移量，然后通过与0比较判断是左滑动还是右滑动，再让滚动条滚动相应的偏移量就实现了。

   const mouseMoveToScroll = (e) => {
      let dom = templateTable.value.bodyWrapper
      const res = e.clientX - lastMousePos.value
      dom.scrollTo(dom.scrollLeft + res, 0)
      lastMousePos.value = e.clientX
    }
    const mouseUpToStop = (e) => {
      templateTable.value.$el.removeEventListener(
        'mousemove',
        mouseMoveToScroll
      )
      templateTable.value.$el.removeEventListener('mouseup', mouseUpToStop)
    }

效果展示：

完整代码：

/* resize */
    const windowMobile = ref(false)
    const AdapterElDialog = () => {
      const W = getDeviceWidth()
      if (W < 1008) {
        windowMobile.value = true
      } else {
        windowMobile.value = false
      }
    }
    /*body scroll */
    const preventScroll = () => {
      if (isMobile.value && popupShow.value) {
        document.body.style.overflow = 'hidden'
      } else {
        document.body.style.overflow = 'scroll'
      }
    }
    watch(
      () => isMobile.value && popupShow.value,
      (nv) => {
        if (nv) {
          document.body.style.overflow = 'hidden'
        } else {
          document.body.style.overflow = 'scroll'
        }
      }
    )
    /* el-table 鼠标控制滚动 */
    const templateTable = ref<any>(null)
    //记录上次鼠标所在的位置
    const lastMousePos = ref<number>(0)
    const mouseControlScroll = () => {
      let dom = templateTable.value.bodyWrapper
      if (dom && !isMobile.value) {
        templateTable.value.$el.addEventListener(
          'mousedown',
          mouseDownReadyScroll
        )
      }
    }
    const mouseDownReadyScroll = (e) => {
      lastMousePos.value = e.clientX
      templateTable.value.$el.addEventListener('mousemove', mouseMoveToScroll)
      templateTable.value.$el.addEventListener('mouseup', mouseUpToStop)
    }
    const mouseMoveToScroll = (e) => {
      let dom = templateTable.value.bodyWrapper
      const res = e.clientX - lastMousePos.value
      dom.scrollTo(dom.scrollLeft + res, 0)
      lastMousePos.value = e.clientX
    }
    const mouseUpToStop = (e) => {
      templateTable.value.$el.removeEventListener(
        'mousemove',
        mouseMoveToScroll
      )
      templateTable.value.$el.removeEventListener('mouseup', mouseUpToStop)
    }
    onMounted(() => {
      //初始化
      initData()
      AdapterElDialog()
      window.addEventListener('resize', AdapterElDialog)
      preventScroll()
      mouseControlScroll()
    })
    onUnmounted(() => {
      window.removeEventListener('resize', AdapterElDialog)
      //移除这个滚动事件
      templateTable.value.$el.removeEventListener(
        'mousedown',
        mouseDownReadyScroll
      )
    })