长图片hover自动滚动

容器指定高度，图片自由高度，图片在容器内滚动

mouseover时响应开启滚动，滚动最大高度为长图的实际高度-容器高度

mouseleave时移除滚动

当鼠标指针位于元素上方时，会发生 mouseover 事件。

mouseover() 方法触发 mouseover 事件，或添加当发生 mouseover 事件时运行的函数。

注意：与 mouseenter 事件不同，mouseover 事件在鼠标指针进入被选元素或任意子元素时都会被触发，mouseenter 事件只有在鼠标指针进入被选元素时被触发。参见页面底部演示实例。

提示：该事件通常与 mouseout 事件一起使用。

实验指路：菜鸟教程在线编辑器

<template>
  <div
    ref="wrapper"
    class="wrapper"
    @mouseover="mouseOver"
    @mouseleave="mouseLeave"
  >
    <img
      ref="image"
      :src="imgSrc"
    >
  </div>
</template>
<script>
export default {
  props: {
    // 可以加一个占位图/失败响应图
    imgSrc: {
      type: String,
      default: '',
    },
    // 设置滚动速度
    speed: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      elWrapper: null,
      scrolling: false,
      timer: 0,
    };
  },
  computed: {
  },
  watch: {
  },
  mounted() {
    this.elWrapper = this.$refs.wrapper;
  },
  methods: {
    mouseOver() {
      if (!this.imgSrc) return;
      this.scrolling = true;
      this.elWrapper.scrollTop = 0;
      const { offsetHeight, scrollHeight } = this.elWrapper;
      const self = this;
      let tempTop = 0;
      this.timer = window.requestAnimationFrame(function fn() {
        if (tempTop + 1 < (scrollHeight-offsetHeight) && self.scrolling) {
          tempTop += self.speed;
          self.elWrapper.scrollTop = tempTop;
          self.timer = window.requestAnimationFrame(fn);
        } else {
          // 延迟5s回顶部，或者在mouseleave 回顶部
          setTimeout(() => {
            self.elWrapper.scrollTop = 0;
          }, 5000);
          window.cancelAnimationFrame(self.timer);
        }
      });
    },
    mouseLeave() {
      this.scrolling = false;
      this.elWrapper.scrollTop = 0;
      if (this.timer) {
        window.cancelAnimationFrame(this.timer);
        this.timer = 0;
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  img {
    width: auto;
    max-width: 100%;
    height: auto;
  }
  ::-webkit-scrollbar {
    display: none;
  }
}
</style>

补充阅读：

scrollHeight：元素内容的高度，包括溢出的不可见内容

clientHeight：元素的像素高度，包含元素的高度+内边距，不包含水平滚动条，边框和外边距

offsetHeight：元素的像素高度 包含元素的垂直内边距和边框，水平滚动条的高度，且是一个整数；

以上属性均为只读属性，读写属性为scrollTop，scrollLeft;

clientHeight+滚动条高度+边框 = offsetHeight

offsetHeight+scrollTop >= scrollHeight // 即到底部了

同理左右滚动；

requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。requestAnimationFrame的优势，在于充分利用显示器的刷新机制，比较节省系统资源。显示器有固定的刷新频率（60Hz或75Hz），也就是说，每秒最多只能重绘60次或75次，

总结requestAnimationFrame的优势体现在两点：

1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。

2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

目前，高版本浏览器Firefox 23 / IE 10 / Chrome / Safari）都支持这个方法。可以用下面的方法，检查浏览器是否支持这个API。如果不支持，则自行模拟部署该方法。

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

效果预览

testHoverScroll