Performant Javascript Fixed Scrolling

Question

I have read countless posts and rewritten code countless times, and I have found myself up against a wall. I am trying to overcome the limitation of not using CSS for fixed position of an element when scrolling a page, due to the container having CSS scale3d transformation applied. While my latest solution works, it is still prone to 'sticking' and 'stuttering' at times, primarily on initial scroll (it seems that some scroll 'momentum' improves apparent performance). This present project is the rewrite of an older app written in Ember, and the same feature in that app works flawlessly. I have stepped through de-minified Ember code until my eyes have bled trying to discover what voodoo has been employed to accomplish this (without success).

Here is my latest iteration, that has had best performance thus far:

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);

To head off some comments: I have tried this code without worrying about applying the previous transform:

$("div[data-sb-active-page='true'] .sb-fixed-scroll").css({
   transform: `translate3d(0px, ${scaled}px, 0px)`
});

I have tried direct DOM constructs - using document.querySelectorAll and then iterating through elements, calling element.style.transform = `translate3d(0px, ${scaled}px, 0px)`

These solutions all work - and the jQuery (surprisingly to me) seems to be the best - but not flawlessly. As previously stated, were it not for the fact that I have witnessed a JS-only solution working without sticking/stuttering, I would be at the point of stating it's the impossible.

This is my white whale - any guidance is appreciated.

UPDATE - created a quick-n-dirty JSFiddle: https://jsfiddle.net/syzmic/sbwac5zq/3/

I scraped the HTML from a page in the current project where scrolling is most problematic. I included the current state of the JS. It works MOST of the time..but rapid mousewheeling can cause stutter or bouncing.

Answer 1

So - the missing key to this was this:

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

Normal JS scrolling was just NOT the answer. The project I was rewriting had taken the ideas from the following blog post and adapter them for use in Ember (I had to do some serious code archeology to dig it out):

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

Once I took a similar approach in my rewrite, scrolling became smooth and lock-steady.