"此网站似乎使用滚动链接定位效果.这可能不适用于异步平移"

Question

我收到了Firefox的这个不寻常的警告.它所指的定位效果是divI旋转作为滚动高度的一个因素.我从来没有遇到任何问题,但这是我应该关注的事情吗？如果没有这个警告,有没有这样的效果？演示此问题的JavaScript是:

//Rotate gears in about section
    $('.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

我想,警告继续说:

... 有关详细信息,请参阅https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects,并加入有关相关工具和功能的讨论!

但如果页面不清楚,这就是它的要点.

"异步平移"的概念是这样的:当页面滚动时,浏览器会调用您的scroll处理程序,但它也会在新的滚动点上异步绘制页面.即使主线程忙碌超过16ms,也可以使滚动显示响应(@ 60 FPS).

这意味着处理程序实现的效果不能保证与当前滚动位置同步.即滚动顺畅,但是你的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>