高性能 Javascript 固定滚动答案

【问题标题】：Performant Javascript Fixed Scrolling高性能 Javascript 固定滚动
【发布时间】：2021-03-24 16:25:59
【问题描述】：

我读了无数的帖子，无数次地重写了代码，我发现自己碰壁了。由于容器应用了 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);

为了阻止一些 cmets：我已经尝试了这段代码，而不必担心应用之前的转换：

$("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 的解决方案在没有卡住/口吃的情况下工作，我会说这是不可能的。

这是我的白鲸 - 感谢任何指导。

更新 - 创建了一个快速且肮脏的 JSFiddle：https://jsfiddle.net/syzmic/sbwac5zq/3/

我从当前项目中滚动问题最严重的页面中抓取了 HTML。我包括了 JS 的当前状态。它在大多数情况下都能正常工作..但快速鼠标滚轮会导致卡顿或弹跳。

【问题讨论】：

第一步是缓存 DOM：在开始时将 DOM 元素存储在一个变量中并重用该变量，而不是在每次迭代时在整个文档中查找这些元素。此外，即使它可能不明显，jQuery 总是比原生 JS 效率低（要执行的代码更多）。话虽如此，您能否发布minimal, reproducible example（带HTML），以便我们可以轻松重现问题而无需自己设置所有内容，以便我们可以使用它并分析它？
首先，从.sb-fixed-scroll 元素中删除transition 属性，它会导致动画延迟。另外，请尝试从小提琴中删除不必要的代码。以这种方式很难隔离问题。

标签： javascript css-position smooth-scrolling custom-scrolling

【解决方案1】：

所以 - 缺少的关键是：

https://github.com/drojdjou/bartekdrozdz.com/blob/master/static/src/framework/VirtualScroll.js

普通的 JS 滚动不是答案。我正在重写的项目从以下博客文章中汲取了一些想法，并将它们改编为在 Ember 中使用（我必须做一些严肃的代码考古才能将其挖掘出来）：

http://www.everyday3d.com/blog/index.php/2014/08/18/smooth-scrolling-with-virtualscroll/

一旦我在重写中采用了类似的方法，滚动就变得平滑且稳定。

【讨论】：