vue中mousewheel滚动

效果

点击上下可以中间滚动，鼠标在框内滚动也会滚动。

外部js

const mouseEvent = { wheel(opt){ console.log(opt) if(!opt.target){ console.log('什么都没有，还让我帮忙！'); return ; } let callback = opt.callback || function () {}; let target = opt.target; //获取兼容事件 let mouseWheel=(/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll": "mousewheel"; //IE if(document.attachEvent){ document.attachEvent('on'+mouseWheel,function (e) { if(e.target.parentElement == target){ callback(e, e.wheelDelta) } }) } //FF、Chrome、Opera、safari else{ document.addEventListener(mouseWheel,function (e) { e = e || window.event; if(e.target.parentElement == target){ if(e.detail){ //FF callback(e,e.detail*40) }else{ callback(e,e.wheelDelta) } } }) } } }; export { mouseEvent }

在图中模块处引入，代码如下

<template> <div class="text-carousel-group"> <div class="go-up mt-10" @click="goUp">︿</div> <div class="content-wrapper" ref="carouselBox"> <div class="content moveContent" ref="carouselContent" :style="{transform:'translateY('+transLateY+'px)'}"> <p v-for="(item,index) in lists" :key="item.id" :class="{active:item.selected}" @click="selectEle(item)">{ 
  {item.text}}</p> </div> </div> <div class="go-down mb-10" @click="goDown">﹀</div> </div> </template> <script> import {mouseEvent} from '../../assets/js/common' export default { name: "text-carousel", props:['lists'], data(){ return { carouselEle:0, //滚动元素 carouselBox:0, //滚动盒子 carouselEleH:0, //滚动元素 carouselBoxH:0, //滚动盒子 transLateY:0 //滚动Y轴距离 } }, methods:{ goUp(){ if(this.carouselEleH + this.transLateY <= this.carouselBoxH){ this.transLateY = this.carouselBoxH - this.carouselEleH >0 ? 0:this.carouselBoxH - this.carouselEleH; }else{ this.transLateY -= 29; } }, goDown(){ if(this.transLateY>=0){ this.transLateY= 0; }else{ this.transLateY += 29; } }, selectEle(str){ this.$emit('myChange',str) }, }, mounted(){ let This = this; window.addEventListener('scroll',this.handleScroll,true) this.carouselBox = this.$refs.carouselBox; this.carouselEle = this.$refs.carouselContent; this.carouselBoxH = this.$refs.carouselBox.offsetHeight; this.carouselEleH = this.$refs.carouselContent.offsetHeight; this.transLateY = 0; //将选中元素显示在中间 var curIndex = 0; this.lists.forEach(function (value,index) { if(value.selected){ curIndex = index; } }); if(this.carouselBoxH<this.carouselEleH){ if(curIndex>3){ if( curIndex < this.lists.length - 3){ this.transLateY = -(curIndex - 3)*29 }else if(curIndex >= this.lists.length - 3){ this.transLateY = this.carouselBoxH - this.carouselEleH } } }; mouseEvent.wheel({ target: This.carouselEle, callback(e, direction){ if(direction>0){ This.goUp(); }else{ This.goDown(); } } }) }, watch:{ } } </script> <style scoped> p{ height: 29px; line-height: 29px; cursor: pointer; } p:hover, p.active{ background-color: rgba(0, 0, 0, 0.2); } .go-up,.go-down{ height: 29px; line-height: 29px; color: #fff; cursor: pointer; user-select: none; } .content p{ color: rgba(255,255,255,0.6); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style>