我读了无数的帖子，无数次地重写了代码，我发现自己碰壁了。由于容器应用了 CSS scale3d 转换，我试图克服在滚动页面时不使用 CSS 来固定元素位置的限制。虽然我的最新解决方案有效，但它有时仍然容易出现“卡住”和“口吃”，主要是在初始滚动时（似乎一些滚动“势头”提高了明显的性能）。这个目前的项目是对一个用 Ember 编写的旧应用程序的重写，并且该应用程序中的相同功能可以完美运行。我已经逐步完成了去细化的 Ember 代码，直到我的眼睛流血，试图发现使用什么巫术来完成这个（没有成功）。
这是我最新的迭代，迄今为止性能最好：
const handler = () => {
const scroll = window.scrollY,
// provides scaling factor from container
scaled = scroll / scalingObject.current.scale;
requestAnimationFrame(() => {
$("div[data-sb-active-page='true'] .sb-fixed-scroll").each(function () {
const $el = $(this),
// a previous (non-translate3d) transform may have been cached
ot = $el.data('sb-original-transform');
$el.css({
transform: `translate3d(0px, ${scaled}px, 0px) ${ot}`,
});
});
});
};
$(window).on('scroll', handler);
阻止一些评论：我已经尝试了这段代码，而不必担心应用以前的转换：
$("div[data-sb-active-page='true'] .sb-fixed-scroll").css({
transform: `translate3d(0px, ${scaled}px, 0px)`
});
我尝试过直接 DOM 构造——使用document.querySelectorAll然后遍历元素，调用element.style.transform = `translate3d(0px, ${scaled}px, 0px)`
这些解决方案都有效——jQuery（令我惊讶的是）似乎是最好的——但并非完美无缺。如前所述，如果不是因为我亲眼目睹了一个仅 JS 的解决方案在没有卡住/口吃的情况下工作，我会说这是不可能的。
这是我的白鲸 - 任何指导表示赞赏。
更新 - 创建了一个快速 n-dirty JSFiddle：https ://jsfiddle.net/syzmic/sbwac5zq/3/
我从当前项目中滚动最成问题的页面中抓取了 HTML。我包括了 JS 的当前状态。它在大多数情况下都有效..但是快速鼠标滚轮会导致口吃或弹跳。