[Vue3] 모달창 오픈 시, 상위 컴포넌트 스크롤 막기

프로젝트 진행 중, 모달이 생성될 때, 뒤에 있는 상위 컴포넌트가 스크롤되는 부분이 굉장히 어색하고 사용자 입장에서 불편할 것이라고 생각하고 스크롤 제어하는 법을 알아 보았다.

 

처음에 시도 한 것은 css를 통해 모달이 열리는 순간, 상위 컴포넌트의 width와 height를 100%, overflow값을 hidden으로 주는 방법을 시도 해보았는데, 어느정도 휠을 내린 후 모달을 열면 컴포넌트의 크기가 100%로 재조정 되어서 모달을 열기 전화면과 모달을 열고 난 후 보이는 상태가 달라지고 또한 모달이 닫히면 다시 처음위치로 돌아왔기 때문에

다른 방법으로 DOM을 제어하는 방법을 선택했다.

 

 

<script>
import { useStore } from "vuex";
import { computed } from "@vue/runtime-core";

export default {
  name: "SearchView",
  setup() {
    const store = useStore();

    const open_search_modal = computed(
      () => store.state.searchModalStore.open_search_modal
    );

    return {
      open_search_modal,
    };
  },

 

computed를 통해 처음에 store에 있는 search_modal의 값이 true인지 false인지 확인해주고

 

  watch: {
    open_search_modal: function (value) {
      value
        ? (document.body.style.overflow = "hidden")
        : document.body.style.removeProperty("overflow");
    },
  },

 

watch를 통해 해당 값이 true라면 DOM에 overflow hideen을 걸어주고

그게 아니라면 overflow를 주는 방식으로 해결했다.