How can I translate the page horizontally left using translate3d and jQuery?

How can I translate the page horizontally left using translate3d and jQuery?

Sideways scrolling seems to be the in thing now, but I do not see much advice on translating the page using translate3d. 

Ideally, I'd love to be able to translate the page left, on 'Scroll', but I am having trouble with my maths. A few articles said I can use pageXOffset for compatibility, but as I say, I am unsure on how to calculate my maths. Do I have to calculate the width of all items first '#feature--items'? Then translate '-' + x + 'px' based on that? 

So far (along with CSS) I have this: 

  3. $(function() {
  4.   if ("scrollBehavior" in document.documentElement.style) {
  5.     $("body").css({ "scroll-behavior": "smooth" });
  6.   }

  8.   var _items = $("#feature--items");

  10.   var scrollingX = $(window).pageXOffset();
  11.   var _pos = scrollingX * 1.1222 + "px";

  13.   $(window).on("scroll", function() {
  14.   // keep top 50%
  15.     _items.css({ transform: "translate3d(-" + _pos + ",-50%,0)" });
  16.   });
  17. });
I know using 'scroll' events for this kind of stuff is not good practice, and I will transfer this to requestAnimationFrame, but just how should I calculate the scrolling?


Thanks for your help! 
David