fix(IndexBar): incorrect behavior inside popup (#7559)

src/index-bar/index.js

@@ -5,7 +5,6 @@ import { preventDefault } from '../utils/dom/event';
 import {
   getScroller,
   getScrollTop,
-  getElementTop,
   getRootScrollTop,
   setRootScrollTop,
 } from '../utils/dom/scroll';
@@ -103,10 +102,9 @@ export default createComponent({
 
       const scrollTop = getScrollTop(this.scroller);
       const scrollerRect = this.getScrollerRect();
-      const rects = this.children.map((item) => ({
-        height: item.height,
-        top: this.getElementTop(item.$el, scrollerRect),
-      }));
+      const rects = this.children.map((item) =>
+        item.getRect(this.scroller, scrollerRect)
+      );
 
       const active = this.getActiveAnchorIndex(scrollTop, rects);
 
@@ -131,7 +129,7 @@ export default createComponent({
           } else if (index === active - 1) {
             const activeItemTop = rects[active].top - scrollTop;
             item.active = activeItemTop > 0;
-            item.top = activeItemTop + scrollerRect.top - item.height;
+            item.top = activeItemTop + scrollerRect.top - rects[index].height;
           } else {
             item.active = false;
           }
@@ -150,18 +148,6 @@ export default createComponent({
       };
     },
 
-    getElementTop(ele, scrollerRect) {
-      const { scroller } = this;
-
-      if (scroller === window || scroller === document.body) {
-        return getElementTop(ele);
-      }
-
-      const eleRect = ele.getBoundingClientRect();
-
-      return eleRect.top - scrollerRect.top + getScrollTop(scroller);
-    },
-
     getActiveAnchorIndex(scrollTop, rects) {
       for (let i = this.children.length - 1; i >= 0; i--) {
         const prevHeight = i > 0 ? rects[i - 1].height : 0;

src/index-bar/test/index.spec.js

@@ -1,13 +1,5 @@
 import { mount, trigger, triggerDrag, mockScrollIntoView } from '../../../test';
 
-function mockOffsetHeight(offsetHeight) {
-  Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
-    get() {
-      return offsetHeight;
-    },
-  });
-}
-
 test('should allow to custom anchor text', () => {
   const wrapper = mount({
     template: `
@@ -97,11 +89,10 @@ test('should update active anchor after page scroll', () => {
     const { index } = this.dataset;
     return {
       top: index ? index * 10 : 0,
+      height: 10,
     };
   };
 
-  mockOffsetHeight(10);
-
   const wrapper = mount({
     template: `
       <van-index-bar :sticky="sticky">
@@ -138,11 +129,10 @@ test('should emit change event when active index changed', () => {
     const { index } = this.dataset;
     return {
       top: index ? index * 10 : 0,
+      height: 10,
     };
   };
 
-  mockOffsetHeight(10);
-
   const onChange = jest.fn();
 
   mount({