尝试修复滚动占位

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoc-element/affix",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "lib/hoc-el-affix.js",
   "description": "📌 Affix 将页面元素固定在可视范围内。",
   "author": "Wisdom <pdsu.wwz@foxmail.com>",

src/components/ScrollAffix/index.vue

@@ -1,10 +1,16 @@
 <template>
-  <div
+  <div>
-    ref="scroll-affix"
+    <div
-    :style="affixStyle"
+      v-if="showPlaceHolder"
-    class="scroll-affix-container"
+      :style="stylePlaceHolder"
-  >
+    ></div>
-    <slot/>
+    <div
+      ref="scroll-affix"
+      :style="affixStyle"
+      class="scroll-affix-container"
+    >
+      <slot/>
+    </div>
   </div>
 </template>
 
@@ -23,6 +29,10 @@ export default {
         position: 'absolute',
         top: 'initial'
       },
+      stylePlaceHolder: {
+
+      },
+      showPlaceHolder: false,
       instance: '',
       defaultInstancePosition: ''
     }
@@ -44,7 +54,9 @@ export default {
     },
     createAffix () {
       this.defaultInstancePosition = this.getInstanceRect().top
+
       this.beforeListener()
+      
       document.addEventListener('scroll', this.scrollListener)
     },
     setFixedForInstance () {
@@ -53,21 +65,38 @@ export default {
         top: `${this.offsetTop}px`
       }
     },
+    setPlaceHolder () {
+      const instanceRect = this.getInstanceRect()
+      this.stylePlaceHolder = {
+        width: instanceRect.width,
+        height: instanceRect.height,
+      }
+    },
     beforeListener () {
       if (this.defaultInstancePosition < this.offsetTop) {
         this.setFixedForInstance()
+
+        this.showPlaceHolder = true
+
+        this.setPlaceHolder()
       }
+
       this.defaultInstancePosition = this.getWindowScrollTop() + this.defaultInstancePosition
     },
     scrollListener () {
       const offsetTop = this.getInstanceRect().top
-      const windowScrollTop = this.getWindowScrollTop()
       if (offsetTop <= this.offsetTop) {
         this.setFixedForInstance()
+
+        this.setPlaceHolder()
       }
+
+      const windowScrollTop = this.getWindowScrollTop()
       const isArrivalDefault = (this.defaultInstancePosition - this.offsetTop) >= windowScrollTop
+
       if (isArrivalDefault && this.affixStyle.position === 'fixed') {
         this.affixStyle = {}
+        this.stylePlaceHolder = {}
       }
     }
   },

src/main.js

@@ -9,7 +9,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '0.0.2',
+  version: '0.0.3',
   install,
   HocElAffix
 }