（Vue | JS）页面元素无缝滚动，支持 上 | 下 | 左 | 右

支持在Vue中引入使用，也可在静态页面中直接使用，支持elemntUi表格滚动，只依赖于jQuery

实现原理是通过传入滚动DOM的id，当dom的子元素尺寸大于dom本身的尺寸就可以开始滚动，具体逻辑在工具类内部都已封装，使用方式参考下面的Vue demo

---

传参说明：

• interval 刷新频率 （ms），默认为 50
• distance 每次刷新移动像素数量（px）,默认为 1
• direction 滚动方向，支持四个方向（向下down|向上top|向右right|向左left） 默认为 down
• loop 是否循环滚动，默认为true
• hoverStop 鼠标移上去是否停止滚动， 默认为true
• containerSizeOffset 容器因为滚动条产生的位置偏移，需正确设置为浏览器滚动条的样式宽度，否则会导致 向上|向左滚动时位置有偏差 默认为17
  

Vue 调用demo

<template>
  <div :id="rollContainer" style="width: 500px; margin: 10px;">
    <el-table :data="tableData" height="300" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="150"></el-table-column>
      <el-table-column prop="address" label="地址1" width="150"></el-table-column>
      <el-table-column prop="address" label="地址2" width="150"></el-table-column>
      <el-table-column prop="address" label="地址3" width="150"></el-table-column>
      <el-table-column prop="address" label="地址4" width="150"></el-table-column>
      <el-table-column prop="address" label="地址5" width="150"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getLRollTool } from '@/utils/LRollTool.js'
import jQuery from 'jquery'
/**
 * @Description: 滚动表格测试
 */
export default {
  name: "scrollTable",
  data() {
    return {
      LRollTool: null,
      rollContainer: 'pendingContainer',
      tableData: [
        {date: '2016-05-03', name: '王小虎1', address: '上海市普陀区金沙江路 1518 弄'},
        {date: '2016-05-03', name: '王小虎2', address: '上海市普陀区金沙江路 1518 弄'},
        {date: '2016-05-03', name: '王小虎3', address: '上海市普陀区金沙江路 1518 弄'},
        {date: '2016-05-03', name: '王小虎4', address: '上海市普陀区金沙江路 1518 弄'},
        {date: '2016-05-03', name: '王小虎5', address: '上海市普陀区金沙江路 1518 弄'},
      ]
    }
  },
  mounted() {
    this.LRollTool = getLRollTool(jQuery)
    // 获取表格内容元素
    var dom = document.getElementById(this.rollContainer).getElementsByClassName("el-table__body-wrapper")
    // 可以传入dom / 也可以传入id, 配置参数采用覆盖方式传入，所有配置参数都有默认属性
    this.LRollTool.init(dom)
    // this.LRollTool.init(dom, { direction: 'right'})
    // this.LRollTool.init(dom, {
    //   interval: 50, // 刷新频率 ms
    //   distance: 1, // 每次刷新移动像素数量
    //   direction: 'down', // 滚动方向 向下down|向上top|向右right|向左left
    //   loop: true, // 是否循环滚动
    //   hoverStop: true, // 鼠标移上去是否停止滚动
    //   containerSizeOffset: 17
    // })
  },
  destroyed() {
    // 定时器的销毁是必要的
    this.LRollTool.stopMove()
  }
}
</script>

LRollTool 工具类

/* getLRollTool
 * @Name getLRollTool
 * @Description: js滚动方法
 * init [container 移动容器(String|dom), options 参数 ]
 */
export function getLRollTool(jQuery) {
  var position = {
    topPosition: 0,
    leftPosition: 0
  }
  var timer
  var timeout
  var element
  var containerHeightSize = 0
  var containerWidthSize = 0
  // 配置参数
  var defaultOptions = {
    interval: 50, // 刷新频率 ms
    distance: 1, // 每次刷新移动像素数量
    direction: 'down', // 滚动方向 向下down|向上top|向右right|向左left
    loop: true, // 是否循环滚动
    hoverStop: true, // 鼠标移上去是否停止滚动
    containerSizeOffset: 17 // 容器因为滚动条产生的位置偏移，需正确设置为浏览器滚动条的样式宽度，否则会导致 向上|向左滚动时位置有偏差
  }
  var currentOptions = {}
  function doRectification(val) {
    let num = val
    if (val < 0) {
      num = num * -1
    }
    return num
  }
  function doMove() {
    containerWidthSize = element.children().width() - element.width()
    containerHeightSize = element.children().height() - element.height()
    switch (currentOptions.direction) {
      case 'right':
        executeMove('leftPosition', containerWidthSize, 'scrollLeft', 'width')
        break
      case 'left':
        executeMove('leftPosition', containerWidthSize, 'scrollLeft', 'width', -1)
        break
      case 'down':
        executeMove('topPosition', containerHeightSize, 'scrollTop', 'height')
        break
      case 'top':
        executeMove('topPosition', containerHeightSize, 'scrollTop', 'height', -1)
        break
      default:
        service.stopMove()
        console.log('方向参数不正确')
    }
  }
  function executeMove(arg = 'topPosition', containerSize, moveFunName = 'scrollTop', sizeFunName = 'height', reversal = 1) {
    // 容器大小大于内部尺寸时，无需滚动，直接返回
    if (containerSize <= 0) {
      return
    }
    if (!currentOptions.hoverStop && position[arg] > 0 && doRectification(position[arg]) < containerSize) {
      position[arg] = element[moveFunName]()
    }
    var reset = false
    if (reversal === 1) {
      if (doRectification(position[arg]) > containerSize + 50) {
        if (!currentOptions.loop) {
          service.stopMove()
        }
        position[arg] = 0
        reset = true
      }
    } else {
      if (position[arg] < -50) {
        if (!currentOptions.loop) {
          service.stopMove()
        }
        position[arg] = containerSize + currentOptions.containerSizeOffset
        reset = true
      }
    }
    if (!reset) {
      position[arg] += (currentOptions.distance * reversal)
    }
    element[moveFunName](position[arg])
  }

  const service = {
    setOptions (options, reset = false) {
      if (reset || JSON.stringify(currentOptions) === '{}') {
        currentOptions = {...defaultOptions, ...options}
      } else {
        currentOptions = {...currentOptions, ...options}
      }
    },
    getOptions () {
      return currentOptions
    },
    stopMove () {
      timer = clearInterval(timer)
      timeout = clearTimeout(timeout)
    },
    startMove() {
      this.stopMove()
      timer = setInterval(doMove, currentOptions.interval)
    },
    // 自定义初始化滚动
    init(container, options = {}) {
      if (typeof container === 'string') {
        element = jQuery('#' + container)
      } else {
        element = jQuery(container)
      }
      this.setOptions(options)
      element.css('overflow', 'auto')
      this.startMove()
      element.mouseover(() => {
        // 点击时暂停滚动
        element.mousedown(() => {
          this.stopMove()
        })
        // 抬起时恢复滚动
        element.mouseup(() => {
          this.startMove()
        })
        // 鼠标滚轮滚动时停止滚动
        element.on("mousewheel DOMMouseScroll", e => {
          this.stopMove()
        })
        if (currentOptions.hoverStop) {
          this.stopMove()
        }
      })
      element.mouseleave(() => {
        this.startMove()
      })
    }
  }
  return service
}

喜欢可以点赞关注下，后续还会有功能更全的滚动工具类更新，支持定距跳跃滚动（带过渡效果）和支持自动计算子元素大小进行跳跃滚动