[#840] Window Hide Scroll 로직 수정 (#841)

* [#840] Window Hide Scroll 로직 수정 ########## - 기존 wheel 이벤트 막는 것에서 body에 paddingRight주고 스크롤 없애는 형태로 수정 * [#840] 예제 문구 수정 Co-authored-by: mjchoi <mjchoi@ex-em.com>
ex-em · Jul 15, 2021 · 3207f09 · 3207f09
1 parent 66c02da
commit 3207f09
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 33 deletions.
diff --git a/docs/views/window/api/window.md b/docs/views/window/api/window.md
@@ -35,4 +35,4 @@
 | fullscreen | Boolean | false | 전체 화면 여부 |
 | is-modal | Boolean | true | 모달창 여부. 즉, dim layer 출력 여부(modal vs. modeless) | true, false |
 | close-on-click-modal | Boolean | false | 모달 레이어 클릭 시 메시지 창 닫기 여부 | true, false |
-| hide-scroll | Boolean | false | body 스크롤 lock 여부 |
+| hide-scroll | Boolean | true | body 스크롤 lock 여부 |
diff --git a/docs/views/window/example/Default.vue b/docs/views/window/example/Default.vue
@@ -17,13 +17,12 @@
     </div>
   </div>
   <div class="case">
-    <p class="case-title">Custom</p>
+    <p class="case-title">Nested</p>
     <ev-window
       v-model:visible="isVisible2"
       :title="'CUSTOM TITLE'"
       :icon-class="'ev-icon-binder'"
       fullscreen
-      hide-scroll
     >
       <div>CUSTOM CONTENTS</div>
       <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
@@ -43,7 +42,6 @@
         :icon-class="'ev-icon-info2'"
         :width="'40%'"
         :height="'60%'"
-        :hide-scroll="true"
       >
         <template #header>
           <div>
@@ -96,11 +94,11 @@
     </div>
   </div>
   <div class="case">
-    <p class="case-title">Hide Scroll</p>
+    <p class="case-title">Block Hide Scroll</p>
     <ev-window
       v-model:visible="isVisible5"
       :title="'COMMON TITLE'"
-      :hide-scroll="true"
+      :hide-scroll="false"
     >
       <div>HIDE BODY SCROLL WITH CONTENTS</div>
     </ev-window>

diff --git a/src/components/window/Window.vue b/src/components/window/Window.vue
@@ -46,7 +46,6 @@
           <div
             ref="windowContent"
             class="ev-window-content"
-            @wheel="onWheelContent"
           >
             <slot />
           </div>
@@ -108,7 +107,7 @@ export default {
     },
     hideScroll: {
       type: Boolean,
-      default: false,
+      default: true,
     },
   },
   emits: {
@@ -141,37 +140,26 @@ export default {
       emit('update:visible', false);
     };
 
+    const getScrollWidth = () => window.innerWidth - document.documentElement.clientWidth;
+
     const changeBodyCls = (isVisible) => {
+      const windowCount = root?.getElementsByClassName('hide-scroll-layer')?.length;
+      const bodyElem = document.body;
+
       if (isVisible) {
         if (props.hideScroll) {
-          document.body.classList.add('ev-window-scroll-lock');
-        }
-      } else {
-        const windowCount = root?.getElementsByClassName('hide-scroll-layer')?.length;
-        if (windowCount === 1) {
-          document.body.classList.remove('ev-window-scroll-lock');
+          if (!windowCount) {
+            const scrollWidth = getScrollWidth();
+            bodyElem.style.paddingRight = `${scrollWidth}px`;
+          }
+          bodyElem.classList.add('ev-window-scroll-lock');
         }
+      } else if (windowCount === 1) {
+        bodyElem.style.removeProperty('padding-right');
+        bodyElem.classList.remove('ev-window-scroll-lock');
       }
     };
 
-    const onWheelContent = (e) => {
-      const hasScroll = windowContent.value.scrollHeight > windowContent.value.clientHeight;
-      if (!hasScroll) {
-        e.preventDefault();
-        e.stopPropagation();
-        return;
-      }
-      const isMeetTop = windowContent.value.scrollTop === 0;
-      const isMeetBottom = (windowContent.value.scrollHeight - windowContent.value.clientHeight)
-        === windowContent.value.scrollTop;
-      const isUpward = e.deltaY < 0;
-      const isDownward = e.deltaY > 0;
-
-      if ((isMeetBottom && isDownward) || (isMeetTop && isUpward)) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    };
 
     watch(
       () => props.visible,
@@ -181,7 +169,6 @@ export default {
     return {
       windowContent,
       closeWin,
-      onWheelContent,
     };
   },
 };