[Error Solved] scroll 이벤트 발생 안되는 버그 수정

EventListener를 제대로 붙였음에도 Scroll Event의 Handler가 제대로 호출이 안되는 버그를 수정하고, 
그에 대해 정리하고자 합니다.

 

Problem

바로 코드를 보자. 

<template>
    <div id="content">
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
    setup() {
        const scrollTop = ref(0);

        function scrollHandler() {
			console.log("scrollHandler has been triggered!")
        }

        onMounted(() => {
            document?.getElementById("content")?.addEventListener("scroll", scrollHandler);
        });
        return {
            scrollTop,
        };
    },
});

분명히, onMounted 됐을 때, scrollHandler를 제대로 등록했음에도, 애초에 scrollHandler가 호출 되지를 않았다. 

 

 

Solution

문제는 css에 있었다. 

기존의 css코드는 아래와 같았다. 

여기에서 height와 overflow-y값을 명시적으로 적용하니 정상적으로 호출 되는 것을 볼 수 있었다.

 

[before]

#content {
    width: 100%;
    min-height: 100%;
}

[after]

#content {
    width: 100%;
    min-height: 100%;
    overflow-y: scroll;
    height: 100%;
}