@mixd-id/web-scaffold 0.1.230406189 → 0.1.230406192

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406189",
+  "version": "0.1.230406192",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Carousel.vue

@@ -97,7 +97,8 @@ export default{
   data(){
     return {
       index: 0,
-			timeoutId: null
+			timeoutId: null,
+      scrollPosition: null,
     }
   },
 
@@ -206,7 +207,7 @@ export default{
         }
         else if(Math.abs(dx) > 15){
           this._props['direction'] = 'horizontal'
-          document.body.classList.add(this.$style.noScroll)
+          this.disableBodyScroll()
         }
       }
       else if(this._props['direction'] === 'horizontal'){
@@ -232,6 +233,8 @@ export default{
         else{
           this.setPosition()
         }
+
+        this.enableBodyScroll()
       }
 
       window.removeEventListener('mousemove', this.mouseMove)
@@ -240,12 +243,24 @@ export default{
       window.removeEventListener('touchmove', this.mouseMove)
       window.removeEventListener('touchend', this.mouseUp)
 
-      document.body.classList.remove(this.$style.noScroll)
-
 			if(this.autoPlay > 0)
 				this.play()
     },
 
+    disableBodyScroll(){
+      this.scrollPosition = window.pageYOffset || document.documentElement.offsetTop
+      document.body.classList.add(this.$style.htmlNoScroll)
+      document.body.classList.add(this.$style.bodyNoScroll)
+      document.body.style.top = `-${this.scrollPosition}px`;
+    },
+
+    enableBodyScroll(){
+      document.body.style.removeProperty('top');
+      document.body.classList.remove(this.$style.bodyNoScroll)
+      document.body.classList.remove(this.$style.htmlNoScroll)
+      window.scrollTo(0, this.scrollPosition);
+    },
+
     mouseDown(e){
 			if(!this.items || this.items.length <= 1)
 				return
@@ -301,11 +316,6 @@ export default{
 	overflow: hidden;
 	position: relative;
 	background-image: v-bind(bgImages[0]);
-  /*touch-action: none;*/
-}
-
-.comp.noTouchAction{
-  /*touch-action: none;*/
 }
 
 .comp img{
@@ -348,8 +358,21 @@ export default{
 	@apply bg-primary-500;
 }
 
-.noScroll{
-  overflow: hidden
+.htmlNoScroll{
+  min-height: 100.3%;
+  overscroll-behavior-y: none;
+  height: 100%;
+  overflow: hidden;
+}
+.bodyNoScroll{
+  overscroll-behavior: none;
+  overscroll-behavior-y: none;
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+  margin: 0;
+  max-height: 100%;
+  -webkit-overflow-scrolling: touch;
 }
 
 @media screen(md){