鼠标控制滚动条滚动_css 鼠标长按鼠标动滚动条动-优快云博客

当在做带表格的项目时候会发现有一个问题，那就是如果列数过多的话阅读起来很不方便，通常列数多到超过窗口，我们会设置横向滚动条来隐藏多余的列数，如下图

但这随着行数的增加就又出现一个问题那就是要控制横向滚动条就得将页面移动到最底才能看到滚动条，这让我们的需要不断地移动页面来达到控制滚动条的效果

为了解决这个问题，我做了一个鼠标在表格的任意一个位置按住并向左或者向右拖动便能控制横向滚动条的移动。

首先我们要在按住鼠标的时候记录它的X轴位置，可以使用event.cliclientX来实现

//鼠标按住触发的函数
drapElement: (e) ->
      t = this
      if !e
        e = window.event
      t.mouseOffsetX = e.clientX
      targ = $(e.target).parents('table')
      $(targ).css("cursor","move")//改变鼠标样式
      t.targetEle = true
      t.moveElement(targ, document, 'x')

上述函数主要是记录鼠标位置（代码不是完整，只是列出核心代码）,然后记录一个标记--targetEle = true这是说明鼠标为mousedown状态，之后触发moveElement函数，如下：

//计算移动时鼠标位置与上一步鼠标位置的差
moveElement: (element, referenceElement, direction) ->
      t = this
      $(element).on 'mousemove' , (e) ->  
        if t.targetEle     //只有在鼠标按下的时候才会执行下列操作
          console.log 'mouseMoveFunc'
          table = $(e.target).parents('table')
          mouseX = 0
          mouseX = e.clientX - t.mouseOffsetX
          t.mouseOffsetX = e.clientX
          # console.log mouseX
          t.setElementLT(element, mouseX)

该函数主要是在鼠标按住并移动时记录此时的鼠标位置与上一步鼠标位置的差，这个值是一直在变化的，之后将差值传入setElementLT函数中来控制横向滚动条

setElementLT: (element, value) ->
    scrollL = $('.card').scrollLeft() + value
    $('.card').scrollLeft(scrollL)
    scrollL = $('#main').scrollLeft() + value   // $('#main')为带有滚动条的节点

接下来是当鼠标松开时的操作，主要就是标记--targetEle变为false和鼠标样式的操作

mouserUpFunc:() ->
      # console.log 'mouseup'
      t = this
      $('table').css("cursor","default")
      t.targetEle = false

上述便是功能的实现，能够不用移动到table底部去操作滚动条