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%;
}