javascript - "This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning"

Question

我收到了来自 Firefox 的异常警告。它所指的定位效果是一个div，我将其作为滚动高度的一个因子进行旋转。我从来没有遇到过任何问题，但是这是我应该担心的事情吗？如果没有这个警告，是否有这样的效果？演示此问题的 JavaScript 是:

$('.gear').css({
   'transition': 'transform 1s ease-out',
   '-webkit-transform': 'rotate(' + Math.round(wScroll / 2) + 'deg)',
   '-moz-transform': 'rotate(' + Math.round(wScroll / 2) + 'deg)',
   '-ms-transform': 'rotate(' + Math.round(wScroll / 2) + 'deg)',
   'transform': 'rotate(' + Math.round(wScroll / 2) + 'deg)',
});

• wScroll 是当前滚动高度

Answer 1

我认为警告继续说道:

...see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

(2021 年更新:文档已移至 https://firefox-source-docs.mozilla.org/performance/scroll-linked_effects.html )

但如果该页面不清楚，这里是它的要点。

“异步平移”的思想是这样的:当页面滚动时，浏览器调用你的scroll处理程序，但它也会异步在新的滚动点绘制页面。这样做是为了让滚动看起来响应迅速 (@ 60 FPS)，即使主线程繁忙时间超过 16 毫秒。

这意味着您的处理程序实现的效果不能保证与当前滚动位置同步。 IE。滚动很流畅，但您的 div 以较小的 FPS 旋转 - 出现卡顿，不流畅。 更新，错过了 transition在您的示例中效果 - 旋转本身也将是平滑的，但它可能会晚于页面开始滚动。

我认为您无法在不出现此问题的情况下实现使用当前可用技术所达到的确切效果。

示例

(请注意，要查看 APZ 的实际效果，您需要运行启用了该功能的 Firefox 版本。特别是，这需要 Firefox 在多进程(“e10s”)模式下运行，而该模式仍未在此时构建版本。)

window.onscroll = function() {
  var wScroll = document.documentElement.scrollTop;
  document.getElementById("gear-css").style.transform = 'rotate(' + Math.round(wScroll / 2) + 'deg)';
  document.getElementById("gear-js") .style.transform = 'rotate(' + Math.round(wScroll / 2) + 'deg)';
  document.getElementById("gear-js").textContent = leftPad(wScroll+'', '0', 4);

  setTimeout(slowdown(500), 0);
};

function leftPad(s, ch, maxLen) { return ch.repeat(maxLen - s.length) + s; }
function slowdown(timeMs) {
  return function() {
    var start = Date.now();
    var j = "";
    for (var i = 0; (Date.now() - start < timeMs); i++)
      j = j+(start+"")*i;
  }
}


window.onload = function() {
  for (let i = 0; i < 15; i++) {
    var p = document.createElement("p");
    p.innerText = `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
    document.documentElement.appendChild(p);
  }
}

#gear-css, #gear-js {
  border: solid black 1px;
}
#gear-css {
  transition: transform 1s ease-out
}

<div style="position: fixed; top: 0; right: 0; padding: 3em;">
  <div id="gear-css">ooo</div>
  <div id="gear-js">ooo</div>
</div>