Предотвратить прокрутку, когда мышь находится над компонентом?

Question

У меня есть компонент vue, который показывает предварительный просмотр изображения, проблема в том, что изображение может быть очень большим (по высоте), но размер контейнера составляет всего 300 пикселей.

Я хотел бы «прокрутить»"изображение, когда пользователь наводит указатель мыши на компонент, но предотвращает поведение по умолчанию, проблема в том, что когда я пытаюсь прослушать прокрутку в компоненте 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>