fix scroll & padding

adileo · Feb 21, 2019 · 61dec57 · 61dec57
1 parent 11448a3
commit 61dec57
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-topmodal",
   "license": "MIT",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": false,
   "main": "./dist/TopModal.common.js",
   "unpkg": "./dist/TopModal.umd.min.js",

diff --git a/src/App.vue b/src/App.vue
@@ -20,7 +20,7 @@
       lg: '600px'
     })"
     :modal-position="'center'"
-    :modal-top="'10%'"
+
     :modal-border-radius="'5px'"
     :modal-box-shadow="'0 0 9px 7px rgba(0,0,0,0.09)'"
     @bg-click="showModal1=false"
@@ -41,7 +41,7 @@
       lg: '600px'
     })"
     :modal-position="'center'"
-    :modal-top="'10%'"
+
     :modal-border-radius="'5px'"
     :modal-box-shadow="'0 0 9px 7px rgba(0,0,0,0.09)'"
     @bg-click="showModal2=false"
@@ -69,7 +69,7 @@
     @bg-click="showModal3=false"
     >
     <template v-slot:content>
-      <div class="topmodal-scrollable topmodal-scrollable-lock" style="width: 100%;height: 100px;">
+      <div class="topmodal-scrollable" body-scroll-lock-ignore style="width: 100%;height: 100px;">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut ipsum a dolor ultricies volutpat. Quisque in ornare tortor. Cras ut mi efficitur, varius massa vitae, porttitor neque. Aliquam sollicitudin dignissim libero, sed congue nibh auctor et. Duis fringilla lorem ultricies elit euismod malesuada. Fusce consequat sem ac maximus luctus. Ut imperdiet libero magna, ut consectetur lorem ornare a. Morbi pharetra urna lacus, tincidunt semper purus suscipit posuere. Quisque at sollicitudin nisi. In sed purus id eros aliquet hendrerit sit amet sit amet lectus. Mauris molestie, lorem hendrerit hendrerit pulvinar, dolor tortor accumsan sem, id volutpat tellus diam nec tellus. Donec nibh eros, sodales ac ullamcorper ut, blandit nec nisl. Cras ultricies diam id massa facilisis fringilla.
       </div>
 
@@ -104,6 +104,9 @@
       <button @click="showModal4 = false">close</button>
     </template>
     </top-modal>
+    <div style="height: 9000px;width: 100%;">
+
+    </div>
   </div>
 </template>
 

diff --git a/src/components/TopModal.vue b/src/components/TopModal.vue
@@ -4,7 +4,7 @@
       <div v-show="showModal" class="topmodal-bg" :style="bgStyle" @click="bgClicked">
       </div>
     </transition>
-    <div class="topmodal-scroll-container topmodal-scrollable-lock" :class="{'topmodal-scrollable': containerScrollable}" @click="bgClicked">
+    <div class="topmodal-scroll-container topmodal-scrollable-lock" ref="scrollContainer" :class="{'topmodal-scrollable': containerScrollable}" @click="bgClicked">
       <transition :name="modalAnimation" v-on:after-leave="closed" v-on:after-enter="opened" appear>
         <div v-show="showModal" class="topmodal-column" :style="columnStyle" @click="bgClicked">
           <div class="topmodal-modal" :style="modalStyle" v-on:click.stop>
@@ -156,8 +156,7 @@ export default {
         styles = {
           ...styles,
           'position': 'relative',
-          'margin-top': this.modalTop,
-          'margin-bottom': this.modalTop,
+          
         }
       }
       if(this.modalPosition === 'bottom'){
@@ -173,6 +172,9 @@ export default {
       var styles = {
         'max-width': this.columnMaxWidth,
         'position': 'relative',
+        'padding-top': this.modalTop,
+        'padding-bottom': this.modalTop,
+        'height': (this.modalHeight === '100%' || this.modalPosition === 'center') ? '100%' : 'auto'
       }
       if(this.columnPosition === 'center'){
         styles = {
@@ -219,28 +221,38 @@ export default {
       if(newV){
         this.mounted = true
         this.showModal = true
-        if(this.scrollLock){
+        // if(this.scrollLock){
           this.$nextTick(() => {
-            var elements = this.$el.querySelectorAll(".topmodal-scrollable-lock")
-            for (var i = 0; i < elements.length; ++i) {
-              disableBodyScroll(elements[i])
-            }
+            // var elements = this.$el.querySelectorAll(".topmodal-scrollable-lock")
+            // for (var i = 0; i < elements.length; ++i) {
+            disableBodyScroll(this.$refs.scrollContainer, {
+              allowTouchMove: el => {
+                while (el && el !== document.body) {
+                  if (el.getAttribute('body-scroll-lock-ignore') !== null) {
+                    return true
+                  }
+                  el = el.parentNode
+                }
+              },
+            })
+            // }
           })
-        }
+        // }
       }else{
         this.showModal = false
-        if(this.scrollLock && this.open === true){
-          var elements = this.$el.querySelectorAll(".topmodal-scrollable-lock")
-          for (var i = 0; i < elements.length; ++i) {
-            enableBodyScroll(elements[i])
-          }
+        if(this.scrollLock){
+          // var elements = this.$el.querySelectorAll(".topmodal-scrollable-lock")
+          // for (var i = 0; i < elements.length; ++i) {
+          enableBodyScroll(this.$refs.scrollContainer)
+          // }
         }
       }
     }
   },
   mounted: function () {
     this.switchOpen(this.open)
-  }
+  },
+
 }
 </script>
 
@@ -273,7 +285,7 @@ export default {
   height: 100%;
 }
 .topmodal-column{
-  height: 100%;
+  /* height: 100%; */
   width: 100%;
 }
 .topmodal-modal{