Question

我有一个AngularJS应用，该应用使用元素相对于视口的位置来决定是否显示其内容。即元素就位，但是在确定外部元素离我们要为其填充内容的视口足够近之前，不添加其内容。我们这样做是为了防止在需要它们之前使所有支持内容的手表处于活动状态。对于大多数外壳，内容（加载时）将同时包含文本和图像。

我在Mac上的Chrome 68中看到的始终是这样的：

如果我使用触控板（Mac笔记本电脑）用两根手指滑动来滚动，这些元素就会显示出来，文本会立即显示出来，并且所有期望的图像网络请求都会显示在“网络”选项卡中。但是，图像请求在实际“运行”之前停顿了2秒钟。

如果在2秒钟的延迟期间，我以任何方式与页面进行交互-滚动一点，单击等等，则请求立即“执行”，并且DOM中的图像填充。简单的鼠标移动不解决请求，也不击键。

如果使用空格键向下翻页，则会立即处理请求。如果向下拖动滚动条，则将立即处理请求。似乎仅限于使用触控板滚动的那些滚动。

图像是否在缓存中都没有关系。从缓存中完成的请求和到达网络的请求都将受到影响。

我尝试将问题减少到关键部分（具有延迟加载内容的预大小div），但无法在我们的应用程序外重现。因此，这可能与我们已经使用的一些复杂CSS有关。

我已使用chrome性能标签确认，在2秒的延迟内我的应用程序没有运行，也没有任何回调或在2秒的标记后触发的任何东西。即我所有的代码都停止了，有2秒的延迟，然后图像请求“开始”，然后图像被填充。

我已经通过向console.log语句添加console.log来确认没有$ digest正在运行，并且做了一些延迟请求的操作（我不清楚是否可以尝试执行该请求-但绝对不是）。 / p>

我已经确认它也不是浏览器扩展。我已经禁用了所有这些文件，还尝试了隐身窗口。

我真的非常希望避免剥离大量应用程序，以期在大海捞针中找到一些针头，所以我希望有人对尝试的方法提出建议。

Answer 1

在这篇文章中找到了答案：

简短的答案是将其添加到您的应用中的某个位置：

$window.addEventListener('mousewheel', (e) => {
  if (e.deltaY === 1) {
    e.preventDefault();
  }
});