Vant: [Bug Report] indexBar非浏览器或者body滚动的时候，索引active状态异常

[dothin]

设备 / 浏览器

谷歌浏览器移动端调试模式iPhone6/7/8

Vant 版本

2.1.1

Vue版本

2.6.10

重现链接

https://codesandbox.io/embed/vant-issue-moban-pql05

描述问题

当indexBar指定了滚动父级后，A-Z索引不正确，比如：我点击C，选中状态却是B

看了源码，是因为
if (this.scroller === window || this.scroller === document.body) {
scrollTop = (0, _scroll.getScrollTop)(this.scroller);
} else {
// see: https://github.com/youzan/vant/issues/3774
scrollTop = 0;
}

scrollTop = 0导致的问题，希望可以增加配置项来实现indexBar不局限于window或者body滚动

[chenjiahan]

@ystarlongzi 有空看下这个问题~

[ystarlongzi]

嗯嗯，我看下

[ystarlongzi]

这个是 <index-anchor />与 滚动容器之间的距离计算错误导致。之前只考虑了：

1. 滚动容器是根元素（ window 或 body）
2. 滚动容器是高度为全屏的非根元素

并没有考虑到「滚动容器是高度任意的非根元素」这种场景导致的

今天晚一点我提个 pr 修复下

---

不过这个问题给我带来一个反思是：所有有监听 scroll 事件的组件，都可能需要考虑下，该组件的滚动容器是否有可能是高度任意的非根元素，如果是，那也有可能存在类似的问题

[chenjiahan]

嗯，可能 Sticky 也会有类似的问题

[wudiansi]

这个是 <index-anchor />与 滚动容器之间的距离计算错误导致。之前只考虑了：

1. 滚动容器是根元素（ window 或 body）
2. 滚动容器是高度为全屏的非根元素

并没有考虑到「滚动容器是高度任意的非根元素」这种场景导致的

今天晚一点我提个 pr 修复下

不过这个问题给我带来一个反思是：所有有监听 scroll 事件的组件，都可能需要考虑下，该组件的滚动容器是否有可能是高度任意的非根元素，如果是，那也有可能存在类似的问题

请问有解决吗 遇到了相同的问题 目前暂时无法手动处理这个非根元素sticky带来的一个错误索引

[ystarlongzi]

@wudiansi 代码正在 review 中....

[wudiansi]

@ystarlongzi 辛苦

[chenjiahan]

已在 2.1.5 版本修复

[dothin]

@chenjiahan 你好，感觉我还有个问题
就是我索引是A-Z，但是我数据不全，并没有A-Z都有数据，
这个时候索引选中状态应该选中我数据里面有的才对
https://codesandbox.io/embed/vant-issue-moban-pql05

[wudiansi]

@chenjiahan 你好，感觉我还有个问题
就是我索引是A-Z，但是我数据不全，并没有A-Z都有数据，
这个时候索引选中状态应该选中我数据里面有的才对
https://codesandbox.io/embed/vant-issue-moban-pql05

建议动态赋值index-list

[chenjiahan]

楼上正解

[dothin]

@chenjiahan 你好，感觉我还有个问题
就是我索引是A-Z，但是我数据不全，并没有A-Z都有数据，
这个时候索引选中状态应该选中我数据里面有的才对
https://codesandbox.io/embed/vant-issue-moban-pql05

建议动态赋值index-list

嗯嗯，动态赋值是可以解决这个问题，但是对用户来说，他看到的应该是一个完整的检索列表
而且个人觉得解决这个问题，对组件本身应该没有啥影响，

@chenjiahan 我本地先临时这么解决的，期望有更好的方案，谢谢！