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>