[Vue.js] Vue 스크롤 이벤트의 기본 동작 제어하기

<template>
  <div>
    <!-- 예제 1: 스크롤 이벤트의 기본 동작을 방지하고 핸들러를 실행합니다. -->
    <div style="height: 200px; overflow-y: scroll;" @scroll.passive="onScroll">
      내용을 스크롤하세요
    </div>

    <!-- 예제 2: 가로 스크롤 이벤트의 기본 동작을 방지하고 핸들러를 실행합니다. -->
    <div style="width: 200px; height: 100px; overflow-x: scroll;" @scroll.passive="onHorizontalScroll">
      가로로 스크롤하세요
    </div>

    <!-- 예제 3: 세로 스크롤 이벤트의 기본 동작을 방지하고 핸들러를 실행합니다. -->
    <div style="height: 100px; overflow-y: scroll;" @scroll.passive="onVerticalScroll">
      세로로 스크롤하세요
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    // 스크롤 이벤트 핸들러입니다. 스크롤 이벤트의 기본 동작을 방지합니다.
    onScroll(event) {
      event.preventDefault();
      console.log('스크롤 이벤트가 발생했습니다.');
    },
    onHorizontalScroll(event) {
      event.preventDefault();
      console.log('가로 스크롤 이벤트가 발생했습니다.');
    },
    onVerticalScroll(event) {
      event.preventDefault();
      console.log('세로 스크롤 이벤트가 발생했습니다.');
    },
  },
};
</script>

Vue에서는 스크롤 이벤트에 .passive 수식어를 사용하여 핸들러를 등록할 수 있습니다. 이를 통해 스크롤 이벤트의 기본 동작을 제어할 수 있습니다.

1. 예제 1: 세로 스크롤이 발생하면 스크롤 이벤트의 기본 동작을 방지하고 onScroll 메서드가 실행됩니다.

2. 예제 2: 가로 스크롤이 발생하면 스크롤 이벤트의 기본 동작을 방지하고 onHorizontalScroll 메서드가 실행됩니다.

3. 예제 3: 세로 스크롤이 발생하면 스크롤 이벤트의 기본 동작을 방지하고 onVerticalScroll 메서드가 실행됩니다.

Vue의 .passive 수식어를 사용하면 스크롤 이벤트의 기본 동작을 제어할 수 있습니다. 이를 통해 스크롤 동작을 적절히 조절하여 사용자 경험을 향상시킬 수 있습니다.