diff --git a/src/index-bar/index.tsx b/src/index-bar/index.tsx
index a74402425..4ee6c998e 100644
--- a/src/index-bar/index.tsx
+++ b/src/index-bar/index.tsx
@@ -1,4 +1,12 @@
-import { ref, watch, computed, nextTick, PropType, CSSProperties } from 'vue';
+import {
+  ref,
+  watch,
+  computed,
+  nextTick,
+  PropType,
+  onMounted,
+  CSSProperties,
+} from 'vue';
 
 // Utils
 import {
@@ -165,14 +173,15 @@ export default createComponent({
       }
     };
 
+    const init = () => {
+      nextTick(onScroll);
+    };
+
     useEventListener('scroll', onScroll, { target: scrollParent });
 
-    watch(
-      () => props.indexList,
-      () => {
-        nextTick(onScroll);
-      }
-    );
+    onMounted(init);
+
+    watch(() => props.indexList, init);
 
     watch(activeAnchor, (value) => {
       if (value) {
diff --git a/src/index-bar/test/__snapshots__/demo.spec.js.snap b/src/index-bar/test/__snapshots__/demo.spec.js.snap
index 8f4227d53..c0d6a8648 100644
--- a/src/index-bar/test/__snapshots__/demo.spec.js.snap
+++ b/src/index-bar/test/__snapshots__/demo.spec.js.snap
@@ -162,7 +162,7 @@ exports[`should render demo and match snapshot 1`] = `
           >
             Y
           </span>
-          <span class="van-index-bar__index"
+          <span class="van-index-bar__index van-index-bar__index--active"
                 data-index="Z"
           >
             Z
@@ -869,8 +869,10 @@ exports[`should render demo and match snapshot 1`] = `
           </div>
         </div>
         <div>
-          <div>
-            <div class="van-index-anchor">
+          <div style="height: 0px;">
+            <div class="van-index-anchor van-index-anchor--sticky van-hairline--bottom"
+                 style="z-index: undefined;"
+            >
               Z
             </div>
           </div>