javascript - 如何注册 mouseover/enter 事件以滚动过去（跳过）元素？

Question

我想为这些事情中的任何一个注册一个 javascript 事件：

1. 用户悬停任何“a”元素
2. 用户正在向下/向上滚动页面，并且任何“a”元素的移动与光标的位置相交。

第一个显然很简单，但我在#2 中挣扎，因为在 Chrome 中，滚动不流畅，元素会“跳过”光标位置而不会触发典型的 JS 事件。

Answer 1

如果滚动速度足够快，则在 FF 等中滚动也是“不流畅”的。

我只是觉得这不值得，但你可能需要做的是：

1. onload，获取每个anchor的位置并确定其面积
2. 将所有可能的坐标收集到对象数组中（索引）
   • { id: 'my-anchor-1', x: 100, y: 100 }
3. onmousemove，根据您的数组检查您的坐标（即，检查旧鼠标位置和新鼠标位置之间的每个坐标，正如其他评论者所说）。

通过这种方式，您可以预先完成大部分计算和 DOM 选择，并使 mousemove 事件变得更加容易。如果稍后添加到页面的内容会移动锚点，这可能会变得混乱：您必须重新计算数组，但相对于 mousemove，这种情况发生的频率较低，如果您所做的只是追加，您可以简单地添加到它。

解决调整大小问题等。这实际上取决于您的观众是谁以及您认为在最坏的情况下您将拥有多少个主播。因为这是 mousemove，所以我们谈论的是桌面/笔记本电脑，在这些桌面/笔记本电脑上调整窗口大小会非常少见，尤其是相对于 mousemove 事件。

如果你只有几个anchors，并且你认为会有很多移位，那么创建索引没有多大意义，你可以在事件本身中进行计算（但至少缓存DOM选择）。但是，如果您认为您将拥有大量锚点，尤其是如果它们不太可能发生很大变化，那么出于性能原因，我认为将它们编入索引很有意义。

Answer 2

我希望你不介意我也使用了 jQuery：

var y = [];  
var ym = [];
$(document).mousemove(function(e) {
  ym.push(e.pageY);
});
$(document).scroll(function(e) { 
  y.push(document.body.scrollTop+ym[ym.length-1]);
  if(y.length-1)  
  {  
    if((y[y.length-2] < $("#a").offset().top && y[y.length-1] > $("#a").offset().top)+$("#a").height() ||
    y[y.length-1] < $("#a").offset().top && y[y.length-2] > $("#a").offset().top)+$("#a").height())
    {
      if($("#a").offset().left < xm[xm.length-1] && $("#a").offset().left+$("#a").width() > xm[xm.length-1])
      {
        HERE IS your desired function
      }
    }
  }
});

我不知道它是否会起作用，但我认为你应该尝试一下。