Merge branch '2.x' into dev

src/index-anchor/index.js

@@ -1,12 +1,13 @@
-import { reactive, ref, computed } from 'vue';
+import { ref, reactive, computed, onMounted } from 'vue';
 
 // Utils
 import { createNamespace } from '../utils';
 import { BORDER_BOTTOM } from '../utils/constant';
 import { INDEX_BAR_KEY } from '../index-bar';
+import { getScrollTop, getRootScrollTop } from '../utils/dom/scroll';
 
 // Composition
-import { useParent } from '@vant/use';
+import { useRect, useParent } from '@vant/use';
 import { useHeight } from '../composition/use-height';
 import { useExpose } from '../composition/use-expose';
 
@@ -21,12 +22,12 @@ export default createComponent({
     const state = reactive({
       top: 0,
       left: null,
+      rect: { top: 0, height: 0 },
       width: null,
       active: false,
     });
 
     const root = ref();
-    const height = useHeight(root);
     const { parent } = useParent(INDEX_BAR_KEY);
 
     const isSticky = () => state.active && parent.props.sticky;
@@ -45,16 +46,37 @@ export default createComponent({
       }
     });
 
+    const getRect = (scrollParent, scrollParentRect) => {
+      const rootRect = useRect(root);
+      state.rect.height = rootRect.height;
+
+      if (scrollParent === window || scrollParent === document.body) {
+        state.rect.top = rootRect.top + getRootScrollTop();
+      } else {
+        state.rect.top =
+          rootRect.top + getScrollTop(scrollParent) - scrollParentRect.top;
+      }
+
+      return state.rect;
+    };
+
+    onMounted(() => {
+      state.rect.height = useHeight(root);
+    });
+
     useExpose({
       state,
-      height,
+      getRect,
     });
 
     return () => {
       const sticky = isSticky();
 
       return (
-        <div ref={root} style={{ height: sticky ? `${height.value}px` : null }}>
+        <div
+          ref={root}
+          style={{ height: sticky ? `${state.rect.height}px` : null }}
+        >
           <div
             style={anchorStyle.value}
             class={[bem({ sticky }), { [BORDER_BOTTOM]: sticky }]}