我从 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)',
});
我认为该警告继续说道：
...see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects了解更多详情并加入相关工具和功能的讨论！
(2021 年更新：该文档已移至https://firefox-source-docs.mozilla.org/performance/scroll-linked_effects.html https://firefox-source-docs.mozilla.org/performance/scroll-linked_effects.html )
但如果该页面不清楚，这里是它的要点。
“异步平移”的思想是这样的：当页面滚动时，浏览器调用你的scroll处理程序，但它也异步地在新的滚动点绘制页面。这样做是为了让滚动看起来响应迅速 (@ 60 FPS)，即使主线程繁忙时间超过 16 毫秒也是如此。
This means that the effects your handler implements are not guaranteed to be in sync with the current scrolling position. I.e. the scrolling is smooth, but your divs rotate with a smaller FPS -- appearing janky, non-smooth. Update, missed the transition effect in your example -- the rotation itself will also be smooth, but it might start later than the page starts to scroll.
我认为您无法在不存在此问题的情况下实现当前可用技术所具有的确切效果。
example
（请注意，要看到APZ https://hacks.mozilla.org/2016/02/smoother-scrolling-in-firefox-46-with-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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
