Как создать масштабируемый элемент документа внутри контейнера в HTML ⇐ Javascript

[Anonymous]

Для программы мне нужно показать внутри контейнера документ (не элемент документа HTML) и этот документ прямо в виде фиксированной ширины и высоты, и должен разрешить увеличение от пользователя. Для меня это очень сложно, и мне нужна помощь, чтобы создать его. Здесь я обратно спроектировал, как это работает: < /p>

Прямо документ начинается с центрированным горизонтальным. < /Li>
Если ширина документа меньше, чем на экране нет необходимости отображать горизонтальную полосу. /> Положение прокрутки масштабируется, чтобы сохранить то, что находится в центре экрана, все еще в центре, и делает Zoom лучше. < /li>
< /ol>
i ' m Используя платформу Preact для создания этого приложения, поэтому я покажу код компонента. 'T показывают правильную сумму для прокрутки, и половина документа не видна.
import { createRef } from "preact";
import { useLayoutEffect, useState } from "preact/hooks";
import type { JSX } from "preact/jsx-runtime";

export interface ContainerScrollScalableProps
{
width: number,
height: number,
scale: number,
children?: any,
}

export const ContainerScrollScalable = (props: ContainerScrollScalableProps): JSX.Element =>
{
const container = createRef();
const [containerW, setW] = useState(0);
const [containerH, setH] = useState(0);

useLayoutEffect(() =>
{
if (container.current)
{
setW(container.current.clientWidth);
setH(container.current.clientHeight);
console.log(container.current.scrollTop);
}
}, [container.current]);

const padTop = containerH * 0.2;
const padBottom = containerH * 0.4;
const padXs = 16 * props.scale;

const scaledW = (props.width * props.scale) + (padXs * 2);
const sizeW = containerW > scaledW ? containerW : scaledW;

return (





);
}
< /code>
Тогда компонент используется таким образом, покажет границу, поэтому для ее проверки не нужны фактические элементы: < /p>
const zoom = getUserZoom(); // range 0.1 --> 3.0

// ...


< /code>
У этого компонента есть некоторые проблемы: < /p>

Требуется знать размер детей как реквизит. < /li> Шкала не идеальна, потому что она не учитывает весь прямолинейный взгляд. границы экрана, и все же математика недостаточно идеальна. /ol>
Как я могу позволить этому компоненту должным образом масштабировать его содержание и позволить позиции прокрутки следовать шкале? < /p>

Подробнее здесь: https://stackoverflow.com/questions/793 ... er-in-html