给定一组上/下像素范围,如何查找已滚动到哪个范围?

问题

当页面从上到下滚动时,用户将通过这些范围。假设它们是按字母顺序排列的通讯簿中的值:当它们从上到下滚动时,它们将从A传递到Z。在文档的侧面有标签,标签上有文档中各节的名称,标签有“Aa An”、“Am As”等。

在Javascript中,在文档的scroll事件上,我需要确定文档的垂直滚动是否在一组值之间。值如下所示:

var indices = {
  'Aa-An': [{id: 92, name: 'Aardvark'}, {id: 13, name: 'Affable'}, ...],
  'Am-As': [{id: 28, name: 'Amber'}, ...],
  ...
}

var heights = {
  'item_92': {top: 170, bottom: 380},
  'item_28': {top: 380, bottom: 600},
  ...
}

heights 是 id 中每个数组中第一个元素的属性 indices top 是该列表中第一个元素在页面上的位置,以及 bottom 是该列表中最后一个元素在页面底部边缘的位置。

我的卷轴处理程序是:

var scroll = get_vertical_scroll();

for(var key in heights) {
  var top = heights[key].top;
  var bottom = heights[key].bottom;

  if(scroll >= top && scroll < bottom) {
    select('.index_tab').removeClass('selected');
    get('index_'+key).addClass('selected');
    return;
  }
}

高度 迭代,所以这是一个有效的线性解。但是,scroll事件已经相当慢了,如果有一个聪明的方法来实现这个O(1)——即使只是在某些情况下——那就要走很长一段路了,因为这发生在文档的每个滚动上。