鼠标悬浮时鼠标滚动示例

[yanxj0]

<vue-seamless-scroll ref="scrollRef" @mouseenter.native="handleMouseEnter" @mouseleave.native="handleMouseLeave">
   ...
</vue-seamless-scroll>

export default{
data(){
return {scrollTop:0}
},
methods:{
handleMouseEnter(){
  let wrap = this.$refs.scrollRef.$el.children[0];
  let rect = wrap.getBoundingClientRect();
  let half = rect.height/2;
  
  let matchs = wrap.style.transform.match(/,\s+(.+?)px\)$/);
  if(matchs.length){
    let translate = Math.abs(Number(matchs[1]));
    let index = +(translate > half));
    wrap.children[index].classList.add('scroll');
    wrap.children[index].style.cssText += `--y:${translate}px;`;
    wrap.children[+!index].classList.add('ul-hidden');
    this.$nextTick(()=>{
      wrap.children[index].scrollTo({
      top:translate % rect.height,
      behavior: "instant"});
    });
    wrap.children[index].addEventistener('scroll',this.handleScroll.bind(this));
  }
},
handleScroll(evt){this.scrollTop = evt.target.scrollTop;},
},
handleMouseLeave(){
  let wrap = this.$refs.scrollRef.$el.children[0];
  for(let i=0;i<2;i++){
    wrap.children[i].classList.remove('scroll');
    wrap.children[i].classList.remove('ul-hidden');
    wrap.children[i].style.cssText = 'overflow:hidden;';
    wrap.children[i].removeEventListener('scroll',this.handleScroll.bind(this));
  }
  this.$refs.scrollREf.yPos = -this.scrollTop;
}

.scroll{
  over-flow-y: auto !important;
  tansform:translateY(var(--y));
  height: 270px;
  // 隐藏滚动条
  width:calc(100% - 8px);
}
.ul-hidden{
  visibility:hidden;
}