diff --git a/src/_common b/src/_common
index a8244de9b..6224ffcc9 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit a8244de9be4d0f13a9861c7377a4c9b3799fdf5f
+Subproject commit 6224ffcc9877f660564217203ded6897fbbfed74
diff --git a/src/popup/__test__/__snapshots__/demo.test.jsx.snap b/src/popup/__test__/__snapshots__/demo.test.jsx.snap
index 410c4ba07..181526f65 100644
--- a/src/popup/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/popup/__test__/__snapshots__/demo.test.jsx.snap
@@ -92,26 +92,7 @@ exports[`Popup > Popup baseVue demo works fine 1`] = `
     <!---->
   </button>
   
-  <teleport-stub
-    data-v-70969ba8=""
-    disabled="false"
-    to="[object HTMLBodyElement]"
-  >
-    <div
-      class="t-overlay"
-      style="z-index: 1000; transition-duration: 300ms; display: none;"
-    >
-      <!---->
-    </div>
-    <div
-      class="t-popup t-popup--top"
-      style="padding: 100px; display: none;"
-    >
-      <!--v-if-->
-      
-      
-    </div>
-  </teleport-stub>
+  <!--v-if-->
 </div>
 `;
 
@@ -296,26 +277,7 @@ exports[`Popup > Popup mobileVue demo works fine 1`] = `
           <!---->
         </button>
         
-        <teleport-stub
-          data-v-70969ba8=""
-          disabled="false"
-          to="[object HTMLBodyElement]"
-        >
-          <div
-            class="t-overlay"
-            style="z-index: 1000; transition-duration: 300ms; display: none;"
-          >
-            <!---->
-          </div>
-          <div
-            class="t-popup t-popup--top"
-            style="padding: 100px; display: none;"
-          >
-            <!--v-if-->
-            
-            
-          </div>
-        </teleport-stub>
+        <!--v-if-->
       </div>
       
     </div>
diff --git a/src/popup/demos/base.vue b/src/popup/demos/base.vue
index 888b1e3d0..de25ec165 100644
--- a/src/popup/demos/base.vue
+++ b/src/popup/demos/base.vue
@@ -3,7 +3,7 @@
     <t-button v-for="p in placement" :key="p" block variant="outline" theme="primary" size="large" @click="onClick(p)">
       {{ p.text }}
     </t-button>
-    <t-popup v-model="visible" :placement="currentPlacement" style="padding: 100px" />
+    <t-popup v-model="visible" :placement="currentPlacement" destroy-on-close style="padding: 100px" />
   </div>
 </template>
 
diff --git a/src/popup/popup.vue b/src/popup/popup.vue
index e49ac5eb8..36c106e17 100644
--- a/src/popup/popup.vue
+++ b/src/popup/popup.vue
@@ -4,6 +4,7 @@
     <transition :name="contentTransitionName" @after-enter="afterEnter" @after-leave="afterLeave">
       <div
         v-show="innerVisible"
+        ref="popupRef"
         :class="[popupClass, $attrs.class, contentClasses]"
         :style="rootStyles"
         v-bind="$attrs"
@@ -28,11 +29,10 @@ import { TdPopupProps } from './type';
 import { useDefault, TNode, renderTNode, isBrowser } from '../shared';
 import { getAttach } from '../shared/dom';
 import { usePrefixClass } from '../hooks/useClass';
+import { useLockScroll } from '../hooks/useLockScroll';
 
 const { prefix } = config;
 
-let lockTimes = 0;
-
 export default defineComponent({
   name: `${prefix}-popup`,
   components: { TNode, TOverlay },
@@ -42,7 +42,7 @@ export default defineComponent({
   setup(props, context) {
     const popupClass = usePrefixClass('popup');
 
-    const bodyLockClass = `${popupClass.value}-overflow-hidden`;
+    const popupRef = ref<HTMLElement>();
 
     const currentInstance = getCurrentInstance();
     const [currentVisible, setVisible] = useDefault<TdPopupProps['visible'], TdPopupProps>(
@@ -56,9 +56,8 @@ export default defineComponent({
 
     // 因为开启 destroyOnClose，会影响 transition 的动画，因此需要前后设置 visible
     watch(currentVisible, (v) => {
-      wrapperVisible.value = v;
-
       if (v) {
+        wrapperVisible.value = v;
         if (props.destroyOnClose) {
           nextTick(() => {
             innerVisible.value = v;
@@ -132,37 +131,9 @@ export default defineComponent({
       },
     );
 
-    const lock = () => {
-      if (!lockTimes && isBrowser) {
-        document.body.classList.add(bodyLockClass);
-      }
-
-      lockTimes++;
-    };
-
-    const unlock = () => {
-      if (lockTimes) {
-        lockTimes--;
+    useLockScroll(popupRef, () => wrapperVisible.value && props.preventScrollThrough, popupClass.value);
 
-        if (!lockTimes && isBrowser) {
-          document.body.classList.remove(bodyLockClass);
-        }
-      }
-    };
-
-    const shouldLock = computed(() => wrapperVisible.value && props.preventScrollThrough);
-
-    watch(
-      () => shouldLock.value,
-      (value) => {
-        value ? lock() : unlock();
-      },
-    );
-    onUnmounted(() => {
-      unlock();
-    });
     return {
-      name,
       to,
       popupClass,
       wrapperVisible,