给定一组顶部/底部像素范围，我如何找到滚动到哪个范围？

Question

问题

当页面从上到下滚动时，用户将通过这些范围。假设它们是按字母顺序排列的地址簿中的值：当它们从上到下滚动时，它们将从 A 传递到 Z。侧面有标签，标有文档中的部分名称，标记为“Aa-An”、“ Am-As'等

我想要的是，当用户从上到下滚动时，滚动处理程序确定当前滚动到哪些部分并突出显示与当前部分相关的选项卡。

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

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 中的键是indices 中每个数组中第一个元素的id 属性。 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;
  }
}

heights 中最多只有 12 个键可以迭代，所以这是一个有效的线性解决方案。但是，滚动事件已经很慢了，如果有一种聪明的方法可以使这个 O(1) - 即使在某些情况下 - 这将有很长的路要走，因为这发生在文档的每次滚动上。

Answer 1

由于您的数据已排序，您可以通过稍微修改的binary search 达到 O(log(N))，它基于阈值而不是完全匹配返回。但是，我怀疑搜索这 12 个项目会减慢您的速度，因为您没有做任何昂贵的事情，例如 DOM 查找。您应该使用像 Firebug 之类的 javascript 分析器来查看减速实际发生的位置。