页面字母定位器的实现思路

UX：

就像是微信的通讯录搜索功能很类似：

1、点击右侧的字母列表，在左侧会进行相应的变化，比如说点A那么A就会跳在第一位

2、滚动的时候，左侧与右侧也会相对应

结构：

1、分左边与右边

     左边：是N个分组，每个分组有一个标题，我一个list列表（也就是我们看到的aaaaaaa这种）

     右边：用的是ul+li 然后用的flex布局，外层也是position布局，与父级进行定位

2、上面是一个搜索功能

js：

点击字母的时候，通过左边与右边的对应关系，找出左边的dom(titleElem这个元素)。

 _dataElementRefs：是分组的父级

scrolltop:页面被卷进去的高度

offsetTop：距离上方或上层控件的位置 

核心就是改变父元素卷进去的高度
this._dataElementRefs.nativeElement.scrollTop = titleElem.nativeElement.offsetTop;

滚动条滚动的时候：

nativeElement.offsetTop > dataElemList.scrollTop：距离上层控件的高度，大于卷进去的高度才设置右侧字母表的状态

dataElemList.addEventListener('scroll', () => {      const refs = this._titleElementRefs.toArray();      for (let i = 0; i < this.alphabeticalIndex.length; i++) {        if (refs[i] && refs[i].nativeElement.offsetTop > dataElemList.scrollTop) {          this._setCurrent(i);          return;        }      }