自定义横向滚动条

表格的父级设置了overflow-x:scroll;
想使用自身的滚动条，自定义样式可以使用伪元素：

.table_right::-webkit-scrollbar {
  width: 6px;
  height: 10px;
  background-color: rgba(240, 240, 240, 1);
}
.table_right::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
  border-radius: 10px;
  background-color: #e3e1e1;
}
.table_right::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
  background-color: rgba(0, 0, 0, 0.2);
}

想不使用自身的滚动条，使用滚动条组件：
效果图：

首选隐藏自身的滚动条：

.table_right::-webkit-scrollbar {
  height: 0px;
}

组件代码：

<template>
  <div class="ScorryBpttom">
    <div
      class="scorrytable"
      ref="scorrytable"
      :style="{ width: BottomWidth + 'px' }"
    >
      <span
        @mousedown="mouseDown($event, translate)"
        ref="setSpans"
        class="ScorryLine"
        :style="{ left: translate + 'px' }"
      ></span>
    </div>
  </div>
</template>
<script>
export default {
  props: ['BottomWidth', 'allwidths'],
  created () {

  },
  data () {
    return {
      scrollbarwidth: 0,
      translate: 0,
      setheight: 0,
      disX: 0,
    }
  },
  watch: {
    allwidths (n, o) {
      this.translate = n
    },
    BottomWidth (n, o) {
    }
  },
  mounted () {
  },
  methods: {
    fnMove (e) {
      var oEvent = e || event;
      var l = oEvent.clientX - this.disX
      this.setDirection({ left: l })
    },
    fnUp () {
      var oSbar = this.$refs.scorrytable
      document.onmousemove = null
      document.onmouseup = null
      if (oSbar.releaseCapture) oSbar.releaseCapture()
    },
    mouseDown (ed, holder) {
      var oSbar = this.$refs.scorrytable
      var oSbtn = this.$refs.setSpans
      let self = this
      var oEvent = ed || event
      self.disX = ed.clientX - oSbtn.offsetLeft
      if (oSbar.setCapture) {
        document.onmousemove = (e) => {
          self.fnMove(e)
        }
        document.onmouseup = (e) => {
          self.fnUp()
        }
        oSbar.setCapture()
      } else {
        document.onmousemove = (e) => {
          self.fnMove(e)
        }
        document.onmouseup = (e) => {
          self.fnUp()
        }
      }
    },
    setDirection (json) {
      var oSbar = this.$refs.scorrytable
      var oSbtn = this.$refs.setSpans
      if (json.left <= 0) {
        json.left = 0;
      } else if (json.left > oSbar.offsetWidth - oSbtn.offsetWidth) {
        json.left = oSbar.offsetWidth - oSbtn.offsetWidth;
      }
      this.translate = json.left
      this.$emit('scrollBar', this.translate)
    }
  }
}
</script>

<style lang="scss" scoped>
.ScorryBpttom {
  height: 40px;
  background: #fff;
  position: fixed;
  left: 50%;
  transform: translateX(-50.2%);
  bottom: 0px;
  width: 1000px;
  z-index: 99;
}
.scorrytable {
  background: rgb(227, 225, 225);
  border-radius: 10px;
  height: 10px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  bottom: -25px;
  .ScorryLine {
    display: block;
    height: 100%;
    background: rgb(182, 180, 180);
    border-radius: 10px;
    cursor: pointer;
    width: 250px;
    position: absolute;
    top: 0px;
    z-index: 99;
  }
}
</style>

父组件的触发方法（用的是mouseWheel方法）：

...
    <div
      v-if="right"
      class="table_right"
      :class="{ table_right_scroll: isFixed }"
      ref="rightTable"
      :style="{ fontSize: fontSize + 'px' }"
      @mousewheel="mousewheel($event)"
    >
    .....
    </div>



    ....
    mousewheel (e) {
      this.$nextTick(() => {
        this.scrollLeft = this.$refs.rightTable.scrollLeft
        this.tableWidth = this.$refs.table.children[1].scrollWidth
        this.allwidths = this.scrollLeft * (this.BottomWidth - 250) / (this.tableWidth - this.$refs.table.clientWidth)
      })
    },

传入的allwidths为滚动条滑动的距离：
计算方法为（以可以向右拖动的表格为例）：
this.allwidths = 表格向右的滚动距离 * (自定义的滚动条的长度 - 滑块的长度) / (整个表格的宽度 - 表格可视区域的长度)

拖动滚动条，使表格跟着滑动，使用滚动组件传出的translate值反着算：

    scrollBar (value) {
      this.$nextTick(() => {
        this.$refs.rightTable.scrollLeft = (this.tableWidth - this.$refs.table.clientWidth) * value / (this.BottomWidth - 250)
      })
    },