How can I create a zoomable, scroll-synchronized document element within a container?

Below is one strategy that may help you avoid the pitfalls you described. Instead of "hardcoding" dimensions via props and manually recalculating offsets with transforms, you can:

1. Allow the content to measure itself.
   Rather than requiring width/height as props, render your document (or its container) unscaled first so you can read its measured dimensions (via a ref).

2. Use a transform on the document button and define its “world size.”
   Apply a scale transform (with a transform origin of “top left”) to your document content. Then, wrap it in a container whose dimensions (and optional extra padding) are computed from the unscaled content dimensions multiplied by the current zoom. This “world” size then defines the scrollable area.

3. Sync scroll positions on zoom changes.
   When the user zooms in or out, recalc the container’s scroll positions so that what was centered before remains centered. One approach is:

   • Read the container’s current center in “world space” (e.g. centerX = scrollLeft + clientWidth/2).
   • After applying the new zoom (i.e. a new scale factor), compute the new scrollLeft as
     newScrollLeft = (centerX * newScale / oldScale) – (clientWidth / 2)
   • Do the same for vertical scroll.
     This adjustment lets you reposition the scrollbar so that the change in scale “rolls” smoothly without jarring shifts.

4. Add padding to avoid edge contact.
   Incorporate any extra padding into the calculation of the container’s minimum dimensions. That is, if your content’s scaled width is A and you want extra padding P on both sides, use a “world” width of A + 2·P. Then center the content accordingly.

Below is an example of a revised component using Preact that puts these ideas together. (You can adapt it for your codebase.) It automatically measures its children, applies the scale with a “top left” transform origin, and updates the scroll positions when the scale changes.

JAVASCRIPTCopied
import { createRef } from "preact";
import { useLayoutEffect, useRef, useState } from "preact/hooks";

export const ScalableDocument = ({ scale, padding = 16, children }) => {
  const containerRef = useRef(null);
  const contentRef = useRef(null);
  const [contentSize, setContentSize] = useState({ width: 0, height: 0 });
  const [prevScale, setPrevScale] = useState(scale);

  // Measure content size on mount or when children change.
  useLayoutEffect(() => {
    if (contentRef.current) {
      const { offsetWidth, offsetHeight } = contentRef.current;
      setContentSize({ width: offsetWidth, height: offsetHeight });
    }
  }, [children]);

  // Update scroll positions when scale changes.
  useLayoutEffect(() => {
    const container = containerRef.current;
    if (!container) return;
    
    // Get current center in scroll container (world space of the previous scale)
    const centerX = container.scrollLeft + container.clientWidth / 2;
    const centerY = container.scrollTop + container.clientHeight / 2;
    
    // Compute the ratio between new and previous scale:
    const ratio = scale / prevScale;
    
    // Update the scroll positions so that the current center remains centered.
    container.scrollLeft = centerX * ratio - container.clientWidth / 2;
    container.scrollTop  = centerY * ratio - container.clientHeight / 2;
    
    setPrevScale(scale);
  }, [scale]);

  // Calculate the scaled width/height + padding.
  const worldWidth  = contentSize.width * scale + padding * 2;
  const worldHeight = contentSize.height * scale + padding * 2;

  return (
    <div
      ref={containerRef}
      style={{
        width: "100%",
        height: "100%",
        overflow: "auto",
        boxSizing: "border-box",
        // Add padding so the content never touches the container border.
        padding: `${padding}px`,
      }}
    >
      {/* A world div that ensures the correct scrollable area */}
      <div style={{ position: "relative", minWidth: worldWidth, minHeight: worldHeight }}>
        {/* The actual content is scaled with transform.
            We use "top left" so that the document’s natural layout is preserved. */}
        <div
          ref={contentRef}
          style={{
            width: contentSize.width ? `${contentSize.width}px` : "auto",
            height: contentSize.height ? `${contentSize.height}px` : "auto",
            transform: `scale(${scale})`,
            transformOrigin: "top left",
          }}
        >
          {children}
        </div>
      </div>
    </div>
  );
};

Explanation

• Self-measurement:
  The component uses a ref on the inner (unscaled) content to measure its dimensions. This lets you avoid having to pass fixed dimensions as props.

• World Size:
  The outer div (the “world”) has a min-width and min-height based on the scaled content plus padding. This lets the browser compute correct scrollable dimensions and scrollbar ranges.

• Transform & Origin:
  Applying the CSS transform with "top left" origin makes the math more straightforward: scaling multiplies the measured dimensions directly.

• Scrollbar Adjustment:
  When the scale changes, the useLayoutEffect recalculates the scrollLeft and scrollTop so that the center remains in view. Changing the ratio based on the previous scale factor is key.

• Padding:
  Extra padding is passed both as CSS padding on the container and as additional space in the scrollable “world” (ensuring that even when fully zoomed, the document isn’t flush with the container’s edges).

This approach should let you zoom the document much like MS Word or LibreOffice Writer—scaling nicely, keeping the center in view, and maintaining proper scroll behavior without the need for hardcoded children dimensions.

Feel free to adjust the math (and even add debounce or smooth transitions if needed) to fit your precise user experience requirements.