标签：index bar vant tab 组件 fixed 属性

在用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属性, 就能固定定位了.

标签：index,bar,vant,tab,组件,fixed,属性
来源： https://blog.csdn.net/CSDN_Sviexu/article/details/121825286

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。