diff --git a/docs/views/window/api/window.md b/docs/views/window/api/window.md
index 2bec33ece..73d2c3c75 100644
--- 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
index dece1b742..552c611dc 100644
--- a/docs/views/window/example/Default.vue
+++ b/docs/views/window/example/Default.vue
@@ -17,13 +17,12 @@
-
Hide Scroll
+
Block Hide Scroll
HIDE BODY SCROLL WITH CONTENTS
diff --git a/src/components/window/Window.vue b/src/components/window/Window.vue
index e8a4c0362..c5a019cb2 100644
--- a/src/components/window/Window.vue
+++ b/src/components/window/Window.vue
@@ -46,7 +46,6 @@
@@ -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,
};
},
};