鼠标悬停在组件上方时是否可以防止滚动？

Question

我有一个vue组件，它显示了图像的预览，问题是图像可能很大（高度），但是容器只有300px。

当用户将鼠标悬停在组件上时，我想“滚动”图像，但是阻止了默认行为，问题是当我尝试收听vue组件中的滚动时，它什么都没有显示。

那么当组件悬停时如何防止滚动？

这是我的组成部分

<template>
<div>
        <img :src="preview" class="img-fluid image">
        <div ref="container" class="position-absolute avatar-image" :class="classes">
            <div class="content position-absolute">
                <h3 class="text-center" :class="{ 'text-white' : this.image != '' }"><slot>Agregar foto</slot></h3>
            </div>
            <input type="file" :name="fieldname" @change="processFile($event)">
        </div>
    </div>
</template>
<script>
    export default {
        props : {
            fieldname : {
                type : String,
                required : true
            },
            oldImage : {
                type : String,
                default : ''
            }
        },
        data : function() {
            return {
                image : '',
                keys  : {37: 1, 38: 1, 39: 1, 40: 1}
            }
        },
        mounted : function() {
            if(this.oldImage != '') {
                this.image = this.oldImage;
            }
        },
        methods : {
            processFile : function($event) {
                if (event.target.files && event.target.files[0]) {
                    var reader = new FileReader();
                    reader.onload = (e) => {
                        this.image = e.target.result;
                    }
                    reader.readAsDataURL(event.target.files[0]);
                }
            }
        },
        computed : {
            preview: function() {
                return this.image == '' ? null : this.image;
            },
            classes : function() {
                return this.image == '' ? ['active', 'bg-white', 'dashed'] : [];
            }
        }
    }
</script>