Vant UI的index-bar( 索引栏 )组件中的anchor元素固定定位在Tab( 标签 )组件下失效的原因记录

在用vant ui制作联系人列表的时候,在vant-tab组件下引用vant-index-bar组将, 发现index-anchor会跟随父元素一起滚动, 于是检查了anchor的样式

.van-index-bar__sidebar {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 2;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    text-align: center;
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none;
}

确实是固定定位, 看起来, 似乎是fixed定位失效了. 在搜索了相关文章之后, 我在这篇文章中找到了解决方法.

 fixed 定位失效 | 不受控制的 position:fixed · Issue #24 · chokcoco/iCSS · GitHub

最后在tab组件的样式中找到了transform属性和will-change属性. 而这两个属性产生的原因是我在van-tab组件中添加了animated的属性. 

去掉animated属性, 就能固定定位了.