Vue 中如何实现自定义滚动条？

随着 Web 应用日益复杂，滚动条成为了日常使用的设计元素之一。然而，浏览器自带的滚动条不能满足所有的需求，因此 Vue 提供了自定义滚动条的选项，可以让开发者轻松地实现自己的滚动条设计。

在 Vue 中实现自定义滚动条的关键在于使用 Vue 的指令来操作 DOM 元素。指令是 Vue 提供的一种向 HTML 元素添加行为的方式，常用于操作 DOM 元素、监听事件、绑定数据等操作。

Vue 的指令需要先注册，再使用。下面是一个最简单的自定义滚动条指令：

Vue.directive('scroll', {
  bind: function(el) {
    el.style.overflowY = 'scroll'
  }
})

这段代码定义了一个名为 scroll 的指令，当指令绑定到元素上时，指令会将元素的 overflowY 属性设置为 scroll，从而在元素的垂直方向上显示滚动条。使用方式如下：

这样，我们就实现了一个简单的自定义滚动条。

然而，这个指令还远远不够完善。下面我们来逐步改进这个指令，实现更多的功能。

1. 滚动条样式

默认的浏览器滚动条并不美观，因此我们需要对滚动条进行样式设计。首先，我们需要为滚动条添加一个容器元素。容器元素的作用是为滚动条提供定位并限制滚动条的高度。

接着，在容器元素和内容元素之间添加一个绝对定位的滚动条元素：

滚动条元素的样式实现很简单：

.scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
  height: 100%;
}

.thumb {
  background-color: #ccc;
  border-radius: 5px;
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
  height: 50px; /* 暂时写死 */
}

我们在 scroll 指令中添加了一些代码，用于操作滚动条的高度和位置：

Vue.directive('scroll', {
  bind: function(el) {
    el.style.overflowY = 'hidden'
    var container = document.createElement('div')
    container.setAttribute('class', 'scroll-container')
    container.style.position = 'relative'
    while (el.firstChild) {
      container.appendChild(el.firstChild)
    }
    el.appendChild(container)
    var scrollbar = document.createElement('div')
    scrollbar.setAttribute('class', 'scrollbar')
    var thumb = document.createElement('div')
    thumb.setAttribute('class', 'thumb')
    scrollbar.appendChild(thumb)
    container.appendChild(scrollbar)
    scrollbar.style.display = 'none'
    container.addEventListener('mouseenter', () => {
      scrollbar.style.display = 'block'
    })
    container.addEventListener('mouseleave', () => {
      scrollbar.style.display = 'none'
    })
    thumb.addEventListener('mousedown', (e) => {
      e.preventDefault()
      var startY = e.clientY
      var thumbTop = thumb.offsetTop
      var containerHeight = container.clientHeight
      document.body.addEventListener('mousemove', onMouseMove)
      document.body.addEventListener('mouseup', onMouseUp)
      function onMouseMove(e) {
        var deltaY = e.clientY - startY
        var thumbPosition = thumbTop + deltaY
        var maxPosition = containerHeight - thumb.clientHeight
        thumbPosition = Math.max(0, Math.min(maxPosition, thumbPosition))
        var contentPosition = thumbPosition / maxPosition * (el.scrollHeight - containerHeight)
        el.scrollTop = contentPosition
        thumb.style.top = thumbPosition + 'px'
      }
      function onMouseUp() {
        document.body.removeEventListener('mousemove', onMouseMove)
        document.body.removeEventListener('mouseup', onMouseUp)
      }
    })
    var isDragging = false
    container.addEventListener('mousedown', (e) => {
      if (e.target !== thumb) {
        isDragging = true
        var startY = e.clientY
        var scrollTop = el.scrollTop
        document.body.addEventListener('mousemove', onMouseMove)
        document.body.addEventListener('mouseup', onMouseUp)
        function onMouseMove(e) {
          var deltaY = e.clientY - startY
          el.scrollTop = scrollTop + deltaY
        }
        function onMouseUp() {
          isDragging = false
          document.body.removeEventListener('mousemove', onMouseMove)
          document.body.removeEventListener('mouseup', onMouseUp)
        }
      }
    })
    el.addEventListener('scroll', () => {
      if (!isDragging) {
        thumb.style.top = el.scrollTop / (el.scrollHeight - container.clientHeight) * (container.clientHeight - thumb.clientHeight) + 'px'
      }
    })
  }
})

这段代码中，我们为容器元素添加了 mouseenter 和 mouseleave 事件监听器，以便在鼠标滑过时显示滚动条。同时，我们为滚动条的拖动添加了 mousedown 事件监听器，当鼠标在拖动条上按下时，记录当前滑块的位置和开始拖动时的鼠标位置，然后在 mousemove 事件中根据鼠标移动的相对距离调整滑块和内容元素的位置。在 mouseup 事件中清除 mousemove 和 mouseup 监听器，结束拖动。

我们还在容器元素上添加了一个 mousedown 事件监听器，用于在容器上单击时滚动内容元素。通过在容器上单击和拖动滑块，我们可以自由地滚动内容元素。

2. 更进一步

在上一节的示例中，我们实现了一个简单的自定义滚动条，并实现了一些基本的功能，但还远远不够完整。下面，我们来探索如何进一步完善这个自定义滚动条，使其更加实用。

2.1 添加横向滚动条

大多数情况下，我们需要同时支持横向和纵向滚动条。为此，我们需要修改 scroll 指令，添加横向滚动条。首先，我们需要在容器元素和内容元素之间添加一个固定的宽度，并限制内容元素的宽度：

接着，我们需要添加横向滚动条的样式：

.scrollbar-h {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 10px;
  width: 100%;
}

.scrollbar-h .thumb {
  background-color: #ccc;
  border-radius: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 10px;
  width: 50px; /* 暂时写死 */
}

我们还需要修改 scroll 指令，增加横向滚动条的事件处理逻辑：

Vue.directive('scroll', {
  bind: function(el) {
    el.style.overflow = 'hidden'
    var container = document.createElement('div')
    container.setAttribute('class', 'scroll-container')
    container.style.position = 'relative'
    while (el.firstChild) {
      container.appendChild(el.firstChild)
    }
    el.appendChild(container)
    var scrollbarV = document.createElement('div')
    scrollbarV.setAttribute('class', 'scrollbar scrollbar-v')
    var thumbV = document.createElement('div')
    thumbV.setAttribute('class', 'thumb')
    scrollbarV.appendChild(thumbV)
    container.appendChild(scrollbarV)
    scrollbarV.style.display = 'none'
    var scrollbarH = document.createElement('div')
    scrollbarH.setAttribute('class', 'scrollbar scrollbar-h')
    var thumbH = document.createElement('div')
    thumbH.setAttribute('class', 'thumb')
    scrollbarH.appendChild(thumbH)
    container.appendChild(scrollbarH)
    scrollbarH.style.display = 'none'
    container.addEventListener('mouseenter', () => {
      scrollbarV.style.display = 'block'
      scrollbarH.style.display = 'block'
    })
    container.addEventListener('mouseleave', () => {
      scrollbarV.style.display = 'none'
      scrollbarH.style.display = 'none'
    })
    thumbV.addEventListener('mousedown', (e) => {
      e.preventDefault()
      var startY = e.clientY
      var thumbTop = thumbV.offsetTop
      var containerHeight = container.clientHeight
      var maxPosition = containerHeight - thumbV.clientHeight
      document.body.addEventListener('mousemove', onMouseMove)
      document.body.addEventListener('mouseup', onMouseUp)
      function onMouseMove(e) {
        var deltaY = e.clientY - startY
        var thumbPosition = thumbTop + deltaY
        thumbPosition = Math.max(0, Math.min(maxPosition, thumbPosition))
        var contentPosition = thumbPosition / maxPosition * (el.scrollHeight - containerHeight)
        el.scrollTop = contentPosition
        thumbV.style.top = thumbPosition + 'px'
      }
      function onMouseUp() {
        document.body.removeEventListener('mousemove', onMouseMove)
        document.body.removeEventListener('mouseup', onMouseUp)
      }
    })
    var isDraggingV = false
    container.addEventListener('mousedown', (e) => {
      if (e.target !== thumbV) {
        isDraggingV = true
        var startY = e.clientY
        var scrollTop = el.scrollTop
        var maxPosition = container.clientHeight - thumbV.clientHeight
        document.body.addEventListener('mousemove', onMouseMove)
        document.body.addEventListener('mouseup', onMouseUp)
        function onMouseMove(e) {
          var deltaY = e.clientY - startY
          var thumbPosition = Math.min(maxPosition, Math.max(0, thumbV.offsetTop + deltaY))
          thumbV.style.top = thumbPosition + 'px'
          var contentPosition = thumbPosition / maxPosition * (el.scrollHeight - container.clientHeight)
          el.scrollTop = contentPosition
        }
        function onMouseUp() {
          isDraggingV = false
          document.body.removeEventListener('mousemove', onMouseMove)
          document.body.removeEventListener('mouseup', onMouseUp)
        }
      }
    })
    el.addEventListener('scroll', () => {
      if (!isDraggingV) {
        thumbV.style.top = el.scrollTop / (el.scrollHeight - container.clientHeight) * (container.clientHeight - thumbV.clientHeight) + 'px'
      }
      if (!isDraggingH) {
        thumbH.style.left = el.scrollLeft / (el.scrollWidth - container.clientWidth) * (container.clientWidth - thumbH.clientWidth) + 'px'
      }
    })
    thumbH.addEventListener('mousedown', (e) => {
      e.preventDefault()
      var startX = e.clientX
      var thumbLeft = thumbH.offsetLeft
      var containerWidth = container.clientWidth
      var maxPosition = containerWidth - thumbH.clientWidth
      document.body.addEventListener('mousemove', onMouseMove)
      document.body.addEventListener('mouseup', onMouseUp)
      function onMouseMove(e) {
        var deltaX = e.clientX - startX
        var thumbPosition = thumbLeft + deltaX
        thumbPosition = Math.max(0, Math.min(maxPosition, thumbPosition))
        var contentPosition = thumbPosition / maxPosition * (el.scrollWidth - containerWidth)
        el.scrollLeft = contentPosition
        thumbH.style.left = thumbPosition + 'px'
      }
      function onMouseUp() {
        document.body.removeEventListener('mousemove', onMouseMove)
        document.body.removeEventListener('mouseup', onMouseUp)
      }
    })
    var isDraggingH = false
    container.addEventListener('mousedown', (e) => {
      if (e.target !== thumbH) {
        isDraggingH = true
        var startX = e.clientX
        var scrollLeft = el.scrollLeft
        var maxPosition = container.clientWidth - thumbH.clientWidth
        document.body.addEventListener('mousemove', onMouseMove)
        document.body.addEventListener('mouseup', onMouseUp)
        function onMouseMove(e) {
          var deltaX = e.clientX - startX
          var thumbPosition = Math.min(maxPosition, Math.max(0, thumbH.offsetLeft + deltaX))
          thumbH.style.left = thumbPosition + 'px'
          var contentPosition = thumbPosition / maxPosition * (el.scrollWidth - container.clientWidth)
          el.scrollLeft = contentPosition
        }
        function onMouseUp() {
          isDraggingH = false
          document.body.removeEventListener('mousemove', onMouseMove)
          document.body.removeEventListener('mouseup', onMouseUp)
        }
      }
    })
  }
})

这样，我们就实现了一个支持横向和纵向滚动条的自定义滚动条。

2.2 滚动到指定位置

有时候，我们需要通过代码控制滚动条的位置。Vue 提供了 $refs 属性，可以让我们在模板内部引用元素，并通过 JavaScript 来操作这些元素。

假设我们需要滚动到第五个元素的位置，我们可以使用以下代码：

vue.$refs.myScroll.scrollTo(4)

我们需要在指令中为容器元素添加一个 ref 属性：

然后，在 scroll 指令中添加一个 scrollTo 方法，用于滚动到指定位置：

Vue.directive('scroll', {
  bind: function(el, binding, vnode) {
    // ...
    vnode.context.$refs[binding.value.ref].scrollTo = function(index) {
      var items = vnode.elm.querySelectorAll(binding.value.selector)
      if (items && items.length > index) {
        var item = items[index]
        el.scrollTop = item.offsetTop
      }
    }
  }
})

最后，在应用中调用 scrollTo 方法即可：

vue.$refs.myScroll.scrollTo(4)

2.3 滚动到顶部和底部

有时候，我们需要一键滚动到顶部或底部的功能。为此，我们可以为指令添加一些工具方法。

首先，我们为 scroll 指令添加 scrollTop 和 scrollBottom 方法：

Vue.directive('scroll', {
  bind: function(el, binding, vnode) {
    // ...
    vnode.context.$refs[binding.value.ref].scrollTop = function() {
      el.scrollTop = 0
    }
    vnode.context.$refs[binding.value.ref].scrollBottom = function() {
      el.scrollTop = el.scrollHeight
    }
  }
})

然后，我们可以在应用中调用 scrollTop 或 scrollBottom 方法实现滚动到顶部或底部的功能：

vue.$refs.myScroll.scrollTop() // 滚动到顶部
vue.$refs.myScroll.scrollBottom() // 滚动到底部

结论

Vue 的自定义指令是一个强大的工具，可以用于实现各种自定义功能。本文介绍了如何使用 Vue 的指令来制作自定义滚动条，并且实现了一些简单的功能，如拖动滑块、滚动到指定位置、滚动到顶部和底部等。在实践中，我们可以根据实际需求进行定制，以便更好地适应业务场景。