How to apply horizontal and vertical scroll on a D3 chart with fixed axis?

Question

I'm trying to follow this great article about how to implement horizontal scroll on D3. I've tried in a number of different ways:

1. Apply a parent div with overflow: scroll. It works at some extend but the none of the Axis are fixed. Not suitable as we need to constantly see both Axis.
2. I tried applying Visx Zoom to Visx Axis with no luck as I couldn't find examples with Category (scaleBand) and Timeline (scaleTime) Axis. (Didn't find the docs that helpful tbh)
3. I built a sandbox and applied same XAxis scrolling principles from the article to the YAxis but I'm struggling how to apply translateY to the transform.

Here's that bit:

 if (type === "wheel") {
      // if (deltaY !== 0) return null;
      transform.x += wheelDeltaX;
      transform.y += wheelDeltaY;
      transform.x = Math.max(transform.x, maxEndTranslate);
      transform.x = Math.min(transform.x, maxStartTranslate);
      transform.y = Math.max(transform.y, maxEndTranslateY);
      transform.y = Math.min(transform.y, maxStartTranslateY);

      const translateX = defaultTranslate + transform.x;
      const translateY = defaultTranslate + transform.y;

      scrollGroup.attr("transform", `translate( ${translateX} , 0)`);
    }

I tried to apply translateY to

scrollGroup.attr("transform", `translate( ${translateX} , ${translateY})`);

But then none of the scrolls work.