diff --git a/src/pull-down-refresh/demos/base.vue b/src/pull-down-refresh/demos/base.vue
index a2e59a073..f308aa069 100644
--- a/src/pull-down-refresh/demos/base.vue
+++ b/src/pull-down-refresh/demos/base.vue
@@ -1,72 +1,26 @@
 <template>
-  <t-pull-down-refresh
-    v-model="refreshing"
-    :loading-bar-height="66"
-    :loading-texts="['下拉刷新', '松开刷新', '正在刷新', '刷新完成']"
-    @refresh="handleRefresh"
-    @scrolltolower="handleScrolltolower"
-  >
-    <!-- 包裹页面全部内容 -->
-    <div class="tdesign-mobile-demo">
-      <tdesign-demo-block>
-        <h1 class="title">PullDownRefresh 下拉刷新</h1>
-        <p class="summary">用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。</p>
-        <div class="tdesign-mobile-block">拖拽该区域演示 顶部下拉刷新</div>
-        <div class="group">
-          <t-skeleton v-for="i in 6" :key="i" :row-col="rowCols" class="item" />
-        </div>
-      </tdesign-demo-block>
-    </div>
-  </t-pull-down-refresh>
+  <div>
+    <PullDownRefresh v-model="refreshing">
+      <div class="w-full" :style="{ backgroundColor: refreshing ? 'pink' : '' }">
+        <div v-for="i in 50" :key="i" class="h-50px">{{ i }}</div>
+      </div>
+    </PullDownRefresh>
+  </div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
+import { PullDownRefresh } from 'tdesign-mobile-vue';
 import { ref } from 'vue';
 
-const rowCols = [
-  1,
-  {
-    width: '100px',
-  },
-  {
-    width: '165.5px',
-    height: '165.5px',
-    borderRadius: '12px',
-  },
-];
-
 const refreshing = ref(false);
-const handleRefresh = (value: any) => {
-  refreshing.value = true;
-  setTimeout(() => {
-    refreshing.value = false;
-  }, 1000);
-};
-const handleScrolltolower = () => {
-  console.log('触底');
-};
 </script>
 
-<style lang="less" scoped>
-.tdesign-mobile-block {
-  box-sizing: border-box;
-  background-color: rgba(243, 243, 243, 1);
-  border-radius: 12px;
-  height: 171px;
-  font-size: 16px;
-  color: rgba(0, 0, 0, 0.26);
-  line-height: 171px;
-  text-align: center;
-  margin: 16px;
+<style scoped>
+.w-full {
+  width: 100%;
 }
-.group {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  padding: 0 16px 140px 16px;
-  .item {
-    width: 47%;
-    margin-bottom: 16px;
-  }
+
+.h-50px {
+  height: 50px;
 }
 </style>
diff --git a/src/pull-down-refresh/pull-down-refresh.vue b/src/pull-down-refresh/pull-down-refresh.vue
index 8f8f52dd9..7e5e02fa6 100644
--- a/src/pull-down-refresh/pull-down-refresh.vue
+++ b/src/pull-down-refresh/pull-down-refresh.vue
@@ -1,18 +1,19 @@
 <template>
-  <div :class="name">
+  <div ref="root" :class="name">
     <div
-      :class="[`${name}__track`, { [`${name}__track--loosing`]: status !== 'pulling' }]"
+      ref="track"
       :style="trackStyle"
       @touchstart.stop="onTouchStart"
-      @touchmove.stop="onTouchMove"
       @touchend.stop="onTouchEnd"
       @touchcancel.stop="onTouchEnd"
-      @transitionend="onTransitionEnd"
     >
-      <div ref="maxBar" :class="`${name}__tips`" :style="maxBarStyles">
-        <div ref="loadingBar" :class="`${name}__loading`" :style="loadingBarStyles">
-          <t-loading v-if="status === 'loading'" size="24px" :text="loadingText" v-bind="loadingProps" />
-          <div v-else :class="`${name}__text`">{{ loadingText }}</div>
+      <div class="pull-refresh-head" :style="getHeadStyle()">
+        <div v-if="slots[state.status]" :class="`pull-refresh-${state.status}`" :distance="state.distance">
+          <slot :name="state.status" :distance="state.distance" />
+        </div>
+        <div v-else class="pull-refresh-text">
+          {{ getStatusText() }}
+          <t-loading v-if="state.status === 'loading'" :text="getStatusText()" class="pull-refresh-loading" />
         </div>
       </div>
       <slot />
@@ -21,197 +22,184 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onUnmounted, ref, toRefs, computed, watch, onMounted } from 'vue';
-import { useElementSize } from '@vueuse/core';
-import debounce from 'lodash/debounce';
-import isArray from 'lodash/isArray';
+import { computed, defineComponent, nextTick, reactive, ref, watch } from 'vue';
+import { useEventListener } from '@vueuse/core';
 
 import PullDownRefreshProps from './props';
-import { useVModel, convertUnit, reconvertUnit } from '../shared';
-import { preventDefault } from '../shared/dom';
+
 import config from '../config';
-import TLoading from '../loading';
-import { useTouch, isReachTop, easeDistance } from './useTouch';
+import { getScrollTop } from '../shared/util';
+import { useScrollParent } from '../shared/useScrollParent';
+import { useTouch } from './useTouch';
+import { preventDefault } from '../shared/dom';
 
 const { prefix } = config;
 const name = `${prefix}-pull-down-refresh`;
-const statusName = ['pulling', 'loosing', 'loading', 'success', 'initial'];
+
+const DEFAULT_HEAD_HEIGHT = 50;
+const TEXT_STATUS = ['pulling', 'loosing', 'success'];
+
+type PullRefreshStatus = 'normal' | 'loading' | 'loosing' | 'pulling' | 'success';
 
 export default defineComponent({
-  name,
-  components: { TLoading },
   props: PullDownRefreshProps,
-  emits: ['refresh', 'timeout', 'scrolltolower', 'update:value', 'update:modelValue'],
-  setup(props) {
-    let timer: any = null;
-
-    // 滑动距离
-    const distance = ref(0);
-    const afterLoading = ref(false);
-    const { value, modelValue } = toRefs(props);
-    const [loading, setLoading] = useVModel(value, modelValue, props.defaultValue, props.onChange);
-
-    const loadingText = computed(() => {
-      const index = statusName.indexOf(status.value);
-      const loadingTexts = isArray(props.loadingTexts)
-        ? props.loadingTexts
-        : ['下拉刷新', '松手刷新', '正在刷新', '刷新完成'];
-      return index >= 0 ? loadingTexts[index] : '';
+  emits: ['refresh', 'change', 'update:modelValue'],
+  setup(props, { emit, slots }) {
+    let reachTop: boolean;
+
+    const root = ref<HTMLElement>();
+    const track = ref<HTMLElement>();
+
+    const state = reactive({
+      status: 'normal' as PullRefreshStatus,
+      distance: 0,
+      duration: 0,
     });
 
     const touch = useTouch();
-    const loadingBar = ref(null);
-    const maxBar = ref(null);
-    const { height: loadingBarHeight } = useElementSize(loadingBar);
-    const { height: maxBarHeight } = useElementSize(maxBar);
-    const actualLoadingBarHeight = ref(0);
+    const scrollParent = useScrollParent(root);
 
-    watch(
-      [loading, loadingBarHeight],
-      ([val], [prevVal]) => {
-        if (val) {
-          distance.value = loadingBarHeight.value;
-        }
-        if (!val && prevVal) {
-          afterLoading.value = true;
-        }
-      },
-      {
-        immediate: true,
-      },
-    );
+    const trackStyle = computed(() => {
+      return {
+        transitionDuration: `${state.duration}ms`,
+        transform: state.distance ? `translate3d(0,${state.distance}px, 0)` : '',
+      };
+    });
 
-    const status = computed(() => {
-      if (afterLoading.value) {
-        return 'success';
-      }
-      if (!loading.value && distance.value === 0) {
-        return 'initial';
+    const getHeadStyle = () => {
+      if (props.maxBarHeight !== DEFAULT_HEAD_HEIGHT) {
+        return {
+          height: `${props.maxBarHeight}px`,
+        };
       }
-      if (distance.value < loadingBarHeight.value) {
-        return 'pulling';
-      }
-      if (loading.value) {
-        return 'loading';
-      }
-      return 'loosing';
-    });
+    };
 
-    watch(status, (newVal) => {
-      if (newVal === 'success') {
-        // 延时300ms收起下拉框，加强刷新成功提示
-        setTimeout(() => {
-          distance.value = 0;
-        }, 300);
+    const getStatusText = () => {
+      const { status } = state;
+      if (status === 'normal') {
+        return '';
       }
-    });
+      return props[`${status}Text` as const];
+    };
 
-    const onTouchStart = (e: TouchEvent) => {
-      if (!isReachTop(e) || loading.value) return;
+    const showSuccessTip = () => {
+      state.status = 'success';
 
-      clearTimeout(timer);
-      timer = null;
-      distance.value = 0;
-      touch.start(e);
+      setTimeout(() => {
+        setStatus(0);
+      }, +props.refreshTimeout);
     };
 
-    const onTouchMove = (e: TouchEvent) => {
-      if (!isReachTop(e) || loading.value) return;
+    const checkPosition = (event: TouchEvent) => {
+      reachTop = getScrollTop(scrollParent.value!) === 0;
+
+      if (reachTop) {
+        state.duration = 0;
+        touch.start(event);
+      }
+    };
+
+    const isTouchable = () => state.status !== 'loading' && state.status !== 'success';
+
+    const ease = (distance: number) => {
+      const pullDistance = +(props.loadingBarHeight || props.maxBarHeight);
 
-      const { deltaY } = touch;
-      actualLoadingBarHeight.value = deltaY.value;
-      const nextDistance = easeDistance(deltaY.value, loadingBarHeight.value);
-      // 下拉时，防止下拉整个页面
-      if (deltaY.value > 0) {
-        preventDefault(e, false);
+      if (distance > pullDistance) {
+        if (distance < pullDistance * 2) {
+          distance = pullDistance + (distance - pullDistance) / 2;
+        } else {
+          distance = pullDistance * 1.5 + (distance - pullDistance * 2) / 4;
+        }
       }
-      if (nextDistance >= 0 && nextDistance < maxBarHeight.value) {
-        distance.value = nextDistance;
+
+      return Math.round(distance);
+    };
+
+    const onTouchStart = (event: TouchEvent) => {
+      if (isTouchable()) {
+        checkPosition(event);
       }
-      touch.move(e);
     };
 
-    const onTouchEnd = (e: TouchEvent) => {
-      if (!isReachTop(e) || loading.value) return;
-
-      if (status.value === 'loosing') {
-        distance.value = loadingBarHeight.value;
-        setLoading(true);
-        props.onRefresh?.();
-        timer = setTimeout(() => {
-          if (loading.value) {
-            props.onTimeout?.();
-            setLoading(false);
-          }
-        }, props.refreshTimeout);
+    const setStatus = (distance: number, isLoading?: boolean) => {
+      const pullDistance = +(props.loadingBarHeight || props.maxBarHeight);
+      state.distance = distance;
+
+      if (isLoading) {
+        state.status = 'loading';
+      } else if (distance === 0) {
+        state.status = 'normal';
+      } else if (distance < pullDistance) {
+        state.status = 'pulling';
       } else {
-        distance.value = 0;
+        state.status = 'loosing';
       }
+
+      emit('change', {
+        status: state.status,
+        distance,
+      });
     };
 
-    const onReachBottom = debounce(
-      () => {
-        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动高度
-        const { clientHeight, scrollHeight } = document.documentElement; // 可视区域/屏幕高度， 页面高度
-        const distance = 20; // 距离视窗 20 时，开始触发
-        if (scrollTop + clientHeight >= scrollHeight - distance) {
-          props.onScrolltolower?.();
-        }
-      },
-      300,
-      {
-        leading: true,
-        trailing: false,
-      },
-    );
+    const onTouchEnd = () => {
+      if (reachTop && touch.deltaY.value && isTouchable()) {
+        state.duration = props.refreshTimeout;
 
-    const onTransitionEnd = () => {
-      if (afterLoading.value) {
-        afterLoading.value = false;
+        if (state.status === 'loosing') {
+          setStatus(+props.loadingBarHeight, true);
+          emit('update:modelValue', true);
+          nextTick(() => emit('refresh'));
+        } else {
+          setStatus(0);
+        }
       }
     };
 
-    const trackStyle = computed(() => {
-      return {
-        transform: `translate3d(0, ${distance.value}px, 0)`,
-      };
-    });
-    const heightDiff = (reconvertUnit(props.maxBarHeight) - reconvertUnit(props.loadingBarHeight)) / 2;
-    const loadingBarStyles = computed(() => {
-      return {
-        transform: `translateY(${heightDiff}px)`,
-        height: `${actualLoadingBarHeight.value}px`,
-        maxHeight: convertUnit(props.loadingBarHeight),
-      };
-    });
-    const maxBarStyles = computed(() => ({
-      height: convertUnit(props.maxBarHeight),
-    }));
+    const onTouchMove = (event: TouchEvent) => {
+      if (isTouchable()) {
+        if (!reachTop) {
+          checkPosition(event);
+        }
 
-    onMounted(() => {
-      window.addEventListener('scroll', onReachBottom);
-    });
+        const { deltaY } = touch;
+        touch.move(event);
 
-    onUnmounted(() => {
-      clearTimeout(timer);
-      window.removeEventListener('scroll', onReachBottom);
-    });
+        if (reachTop && deltaY.value >= 0 && touch.isVertical()) {
+          preventDefault(event);
+          setStatus(ease(deltaY.value));
+        }
+      }
+    };
+
+    watch(
+      () => props.modelValue,
+      (value) => {
+        state.duration = +props.refreshTimeout;
+
+        if (value) {
+          setStatus(+props.loadingBarHeight, true);
+          // || props.successText
+        } else if (slots.success) {
+          showSuccessTip();
+        } else {
+          setStatus(0, false);
+        }
+      },
+    );
+
+    useEventListener(track, 'touchmove', onTouchMove);
 
     return {
       name,
-      status,
+      root,
+      track,
+      state,
+      slots,
       trackStyle,
-      loadingText,
-      maxBarStyles,
-      loadingBarStyles,
-      loadingBar,
-      maxBar,
-      loading,
-      distance,
+      getStatusText,
+      getHeadStyle,
       onTouchStart,
-      onTouchMove,
       onTouchEnd,
-      onTransitionEnd,
     };
   },
 });
diff --git a/src/pull-down-refresh/pull-down-refresh1.vue b/src/pull-down-refresh/pull-down-refresh1.vue
new file mode 100644
index 000000000..ac9b19456
--- /dev/null
+++ b/src/pull-down-refresh/pull-down-refresh1.vue
@@ -0,0 +1,219 @@
+<template>
+  <div :class="name">
+    <div
+      :class="[`${name}__track`, { [`${name}__track--loosing`]: status !== 'pulling' }]"
+      :style="trackStyle"
+      @touchstart.stop="onTouchStart"
+      @touchmove.stop="onTouchMove"
+      @touchend.stop="onTouchEnd"
+      @touchcancel.stop="onTouchEnd"
+      @transitionend="onTransitionEnd"
+    >
+      <div ref="maxBar" :class="`${name}__tips`" :style="maxBarStyles">
+        <div ref="loadingBar" :class="`${name}__loading`" :style="loadingBarStyles">
+          <t-loading v-if="status === 'loading'" size="24px" :text="loadingText" v-bind="loadingProps" />
+          <div v-else :class="`${name}__text`">{{ loadingText }}</div>
+        </div>
+      </div>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onUnmounted, ref, toRefs, computed, watch, onMounted } from 'vue';
+import { useElementSize } from '@vueuse/core';
+import debounce from 'lodash/debounce';
+import isArray from 'lodash/isArray';
+
+import PullDownRefreshProps from './props';
+import { useVModel, convertUnit, reconvertUnit } from '../shared';
+import { preventDefault } from '../shared/dom';
+import config from '../config';
+import TLoading from '../loading';
+import { useTouch, isReachTop, easeDistance } from './useTouch';
+
+const { prefix } = config;
+const name = `${prefix}-pull-down-refresh`;
+const statusName = ['pulling', 'loosing', 'loading', 'success', 'initial'];
+
+export default defineComponent({
+  name,
+  components: { TLoading },
+  props: PullDownRefreshProps,
+  emits: ['refresh', 'timeout', 'scrolltolower', 'update:value', 'update:modelValue'],
+  setup(props) {
+    let timer: any = null;
+
+    // 滑动距离
+    const distance = ref(0);
+    const afterLoading = ref(false);
+    const { value, modelValue } = toRefs(props);
+    const [loading, setLoading] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+
+    const loadingText = computed(() => {
+      const index = statusName.indexOf(status.value);
+      const loadingTexts = isArray(props.loadingTexts)
+        ? props.loadingTexts
+        : ['下拉刷新', '松手刷新', '正在刷新', '刷新完成'];
+      return index >= 0 ? loadingTexts[index] : '';
+    });
+
+    const touch = useTouch();
+    const loadingBar = ref(null);
+    const maxBar = ref(null);
+    const { height: loadingBarHeight } = useElementSize(loadingBar);
+    const { height: maxBarHeight } = useElementSize(maxBar);
+    const actualLoadingBarHeight = ref(0);
+
+    watch(
+      [loading, loadingBarHeight],
+      ([val], [prevVal]) => {
+        if (val) {
+          distance.value = loadingBarHeight.value;
+        }
+        if (!val && prevVal) {
+          afterLoading.value = true;
+        }
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    const status = computed(() => {
+      if (afterLoading.value) {
+        return 'success';
+      }
+      if (!loading.value && distance.value === 0) {
+        return 'initial';
+      }
+      if (distance.value < loadingBarHeight.value) {
+        return 'pulling';
+      }
+      if (loading.value) {
+        return 'loading';
+      }
+      return 'loosing';
+    });
+
+    watch(status, (newVal) => {
+      if (newVal === 'success') {
+        // 延时300ms收起下拉框，加强刷新成功提示
+        setTimeout(() => {
+          distance.value = 0;
+        }, 300);
+      }
+    });
+
+    const onTouchStart = (e: TouchEvent) => {
+      if (!isReachTop(e) || loading.value) return;
+
+      clearTimeout(timer);
+      timer = null;
+      distance.value = 0;
+      touch.start(e);
+    };
+
+    const onTouchMove = (e: TouchEvent) => {
+      if (!isReachTop(e) || loading.value) return;
+
+      const { deltaY } = touch;
+      actualLoadingBarHeight.value = deltaY.value;
+      const nextDistance = easeDistance(deltaY.value, loadingBarHeight.value);
+      // 下拉时，防止下拉整个页面
+      if (deltaY.value > 0) {
+        console.log('preventDefault', deltaY.value);
+        preventDefault(e, false);
+      }
+      if (nextDistance >= 0 && nextDistance < maxBarHeight.value) {
+        distance.value = nextDistance;
+      }
+      touch.move(e);
+    };
+
+    const onTouchEnd = (e: TouchEvent) => {
+      if (!isReachTop(e) || loading.value) return;
+
+      if (status.value === 'loosing') {
+        distance.value = loadingBarHeight.value;
+        setLoading(true);
+        props.onRefresh?.();
+        timer = setTimeout(() => {
+          if (loading.value) {
+            props.onTimeout?.();
+            setLoading(false);
+          }
+        }, props.refreshTimeout);
+      } else {
+        distance.value = 0;
+      }
+    };
+
+    const onReachBottom = debounce(
+      () => {
+        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动高度
+        const { clientHeight, scrollHeight } = document.documentElement; // 可视区域/屏幕高度， 页面高度
+        const distance = 20; // 距离视窗 20 时，开始触发
+        if (scrollTop + clientHeight >= scrollHeight - distance) {
+          props.onScrolltolower?.();
+        }
+      },
+      300,
+      {
+        leading: true,
+        trailing: false,
+      },
+    );
+
+    const onTransitionEnd = () => {
+      if (afterLoading.value) {
+        afterLoading.value = false;
+      }
+    };
+
+    const trackStyle = computed(() => {
+      return {
+        transform: `translate3d(0, ${distance.value}px, 0)`,
+      };
+    });
+    const heightDiff = (reconvertUnit(props.maxBarHeight) - reconvertUnit(props.loadingBarHeight)) / 2;
+    const loadingBarStyles = computed(() => {
+      return {
+        transform: `translateY(${heightDiff}px)`,
+        height: `${actualLoadingBarHeight.value}px`,
+        maxHeight: convertUnit(props.loadingBarHeight),
+      };
+    });
+    const maxBarStyles = computed(() => ({
+      height: convertUnit(props.maxBarHeight),
+    }));
+
+    onMounted(() => {
+      window.addEventListener('scroll', onReachBottom);
+    });
+
+    onUnmounted(() => {
+      clearTimeout(timer);
+      window.removeEventListener('scroll', onReachBottom);
+    });
+
+    return {
+      name,
+      status,
+      trackStyle,
+      loadingText,
+      maxBarStyles,
+      loadingBarStyles,
+      loadingBar,
+      maxBar,
+      loading,
+      distance,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      onTransitionEnd,
+    };
+  },
+});
+</script>
diff --git a/src/pull-down-refresh/useTouch.ts b/src/pull-down-refresh/useTouch.ts
index 142c17ed0..9d2d3e9f8 100644
--- a/src/pull-down-refresh/useTouch.ts
+++ b/src/pull-down-refresh/useTouch.ts
@@ -1,51 +1,78 @@
 import { ref } from 'vue';
 
-const isElement = (node: Element) => {
-  const ELEMENT_NODE_TYPE = 1;
-  return node.tagName !== 'HTML' && node.tagName !== 'BODY' && node.nodeType === ELEMENT_NODE_TYPE;
-};
+type Direction = '' | 'vertical' | 'horizontal';
+export const TAP_OFFSET = 5;
+
+function getDirection(x: number, y: number) {
+  if (x > y) {
+    return 'horizontal';
+  }
+  if (y > x) {
+    return 'vertical';
+  }
+  return '';
+}
 
 export function useTouch() {
+  const startX = ref(0);
   const startY = ref(0);
+  const deltaX = ref(0);
   const deltaY = ref(0);
-  const start = (event: TouchEvent) => {
-    startY.value = event.touches[0].clientY;
+  const offsetX = ref(0);
+  const offsetY = ref(0);
+  const direction = ref<Direction>('');
+  const isTap = ref(true);
+
+  const isVertical = () => direction.value === 'vertical';
+  const isHorizontal = () => direction.value === 'horizontal';
+
+  const reset = () => {
+    deltaX.value = 0;
     deltaY.value = 0;
+    offsetX.value = 0;
+    offsetY.value = 0;
+    direction.value = '';
+    isTap.value = true;
   };
-  const move = (event: TouchEvent) => {
+
+  const start = ((event: TouchEvent) => {
+    reset();
+    startX.value = event.touches[0].clientX;
+    startY.value = event.touches[0].clientY;
+  }) as EventListener;
+
+  const move = ((event: TouchEvent) => {
     const touch = event.touches[0];
+    // safari back will set clientX to negative number
+    deltaX.value = (touch.clientX < 0 ? 0 : touch.clientX) - startX.value;
     deltaY.value = touch.clientY - startY.value;
-  };
+    offsetX.value = Math.abs(deltaX.value);
+    offsetY.value = Math.abs(deltaY.value);
+
+    // lock direction when distance is greater than a certain value
+    const LOCK_DIRECTION_DISTANCE = 10;
+    if (!direction.value || (offsetX.value < LOCK_DIRECTION_DISTANCE && offsetY.value < LOCK_DIRECTION_DISTANCE)) {
+      direction.value = getDirection(offsetX.value, offsetY.value);
+    }
+
+    if (isTap.value && (offsetX.value > TAP_OFFSET || offsetY.value > TAP_OFFSET)) {
+      isTap.value = false;
+    }
+  }) as EventListener;
+
   return {
+    move,
+    start,
+    reset,
+    startX,
     startY,
+    deltaX,
     deltaY,
-    start,
-    move,
+    offsetX,
+    offsetY,
+    direction,
+    isVertical,
+    isHorizontal,
+    isTap,
   };
 }
-// 缓动函数
-export const easeDistance = (distance: number, pullDistance: number) => {
-  if (distance > pullDistance) {
-    if (distance < pullDistance * 2) {
-      distance = pullDistance + (distance - pullDistance) / 2;
-    } else {
-      distance = pullDistance * 1.5 + (distance - pullDistance * 2) / 4;
-    }
-  }
-  return Math.round(distance);
-};
-// 获取最新的可滚动父元素
-export const getScrollParent = (node: Element) => {
-  let res = node;
-  while (res && isElement(res)) {
-    if (/auto|scroll/i.test(window.getComputedStyle(res).overflowY)) {
-      return res;
-    }
-    res = res.parentNode as Element;
-  }
-};
-// 确保可滚动的父元素此时处于未滚动状态
-export const isReachTop = (e: TouchEvent) => {
-  const scrollParent = getScrollParent(e.target as Element);
-  return !scrollParent || !scrollParent.scrollTop;
-};
diff --git a/src/shared/util.ts b/src/shared/util.ts
index 19b24dee0..746f3370d 100644
--- a/src/shared/util.ts
+++ b/src/shared/util.ts
@@ -67,3 +67,10 @@ export const reconvertUnit = (val: string | number | undefined) => {
   if (val == null) return 0;
   return isNumber(val) ? Number(val) : Number(val.slice(0, -2));
 };
+
+export type ScrollElement = Element | Window;
+
+export function getScrollTop(el: ScrollElement): number {
+  const top = 'scrollTop' in el ? el.scrollTop : el.pageYOffset;
+  return Math.max(top, 0);
+}