例如

Question

我从Firefox那里得到了这个不同寻常的警告。它引用的定位效果是div我旋转作为滚动高度的因子。我从来没有遇到任何问题，但这是我应该关注的事情吗？如果没有这个警告，有没有这样的效果？演示此问题的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处理程序，但它也异步在新的滚动点处绘制页面。这样做是为了使滚动显示响应（@ 60 FPS），即使主线程忙碌超过16毫秒。

这意味着您的处理程序实现的效果不能保证与当前滚动位置同步。即滚动是平滑的，但是~~你的div用较小的FPS旋转 - 出现 janky ，不平滑。~~ 更新，错过了{{1在你的例子中效果 - 旋转本身也会很平滑，但它可能会在页面开始滚动之后开始。

我不认为您可以在没有此问题的情况下实现您对当前可用技术的确切效果。

例如

（请注意，要查看APZ的运行情况，您需要在启用Firefox版本的情况下运行它。特别是这需要Firefox以多进程（“e10s”）模式运行，这仍然是此时不在发布版本中。）

transition

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
}

Answer 2

我知道这个问题是前一段时间被问到的，然而，性能问题仍然存在。下面是一个不依赖于滚动事件监听器的替代解决方案。这最大限度地减少了由Web浏览器中常见的单独滚动线程引起的抖动和滞后，定期更新css而不是滚动窗口时。这意味着不会显示开发控制台警告。我个人不会太担心警告或使用滚动事件来处理诸如转动齿轮或更改css类之类的小事，但是，如果用户体验直接依赖于效果，则会破坏页面的可用性。 / p>

var gear;
var lastPosition;
var refreshRate = 60; // fps; reduce for less overhead
var animation = "rotate(*deg)"; // css style to apply [Wildcard is *]
var link = 0.5; //what to multiply the scrollTop by

function replace(){
    if(lastPosition != document.body.scrollTop){ // Prevents unnecessary recursion
        lastPosition = document.body.scrollTop; // updates the last position to current
        gear.style.transform = animation.replace("*", Math.round(lastPosition * link)); // applies new style to the gear
    }
}

function setup(){
    lastPosition = document.body.scrollTop;
    gear = document.querySelector(".gear");
    setInterval(replace, 1000 / refreshRate); // 1000 / 60 = 16.666... Invokes function "replace" to update for each frame
}
window.addEventListener("DOMContentLoaded", setup);

可以使用工作示例on my GitHub。我已经在Firefox，Chrome和Edge（工程）上测试了它。

避免警告的其他替代方法是使用css sticky elements或使用 element.classList.add（）和 element.classList.remove（）方法倾向于 window.onscroll 事件。

注意：小心使用css过渡，其中转换的长度比脚本更新CSS样式的时间间隔（例如基于滚动事件的更改）。基于Webkit的浏览器和EdgeHTML将以意想不到的方式运行，通常保持在其初始位置，直到元素停止由脚本更新。除非这是你想要的效果，在这种情况下它在firefox中的工作方式不同。

Servo Webrender，当集成到Firefox中时，将在一定程度上解决这些问题（或至少相当大地提高性能）。虽然仍有其他浏览器可以保持与。

的兼容性

Answer 3

最好的解决方案是开关和计时器当您使用“滚动”时，我在这里给出解决相同错误的答案，我建议您使我的脚本适应您的需求！ https://medium.com/@javedmultani16/uiscrollview-dynamic-content-size-through-storyboard-in-ios-fb873e9278e

＆＃34;此网站似乎使用滚动链接定位效果。这可能不适用于异步平移＆＃34;

3 个答案:

例如