diff --git a/src/components/d2-container/components/d2-container-card.vue b/src/components/d2-container/components/d2-container-card.vue
index a8450e98..9b2a2cd2 100644
--- a/src/components/d2-container/components/d2-container-card.vue
+++ b/src/components/d2-container/components/d2-container-card.vue
@@ -3,8 +3,8 @@
     <div v-if="$slots.header" class="d2-container-card__header" ref="header">
       <slot name="header"/>
     </div>
-    <div class="d2-container-card__body">
-      <div class="d2-container-card__body-card" ref="body">
+    <div class="d2-container-card__body" ref="body">
+      <div class="d2-container-card__body-card">
         <slot/>
       </div>
     </div>
@@ -20,6 +20,14 @@ export default {
   name: 'd2-container-card',
   mixins: [
     scroll
-  ]
+  ],
+  mounted () {
+    // 增加滚动事件监听
+    this.addScrollListener()
+  },
+  beforeDestroy () {
+    // 移除滚动事件监听
+    this.removeScrollListener()
+  }
 }
 </script>
diff --git a/src/components/d2-container/components/d2-container-ghost.vue b/src/components/d2-container/components/d2-container-ghost.vue
index 4527643f..2e6f47b9 100644
--- a/src/components/d2-container/components/d2-container-ghost.vue
+++ b/src/components/d2-container/components/d2-container-ghost.vue
@@ -18,6 +18,14 @@ export default {
   name: 'd2-container-ghost',
   mixins: [
     scroll
-  ]
+  ],
+  mounted () {
+    // 增加滚动事件监听
+    this.addScrollListener()
+  },
+  beforeDestroy () {
+    // 移除滚动事件监听
+    this.removeScrollListener()
+  }
 }
 </script>
diff --git a/src/pages/demo/components/container/api.vue b/src/pages/demo/components/container/api.vue
index bd4a4d86..0f373d9d 100644
--- a/src/pages/demo/components/container/api.vue
+++ b/src/pages/demo/components/container/api.vue
@@ -1,6 +1,7 @@
 <template>
   <d2-container
     ref="container"
+    type="card"
     :scroll-delay="scrollDelay"
     @scroll="handleScroll">
     <template slot="header">