如何在页面加载时放大当前位置

<style>
    #zoom-container {
        position: relative;
        overflow: hidden;
    }
    #zoom-content {
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: top left;
        transition: transform 0.5s;
    }
</style>

<div id="zoom-container">
    <div id="zoom-content">
        <!-- 在这里添加页面内容 -->
    </div>
</div>

<script>
    window.addEventListener('load', function() {
        var zoomContainer = document.getElementById('zoom-container');
        var zoomContent = document.getElementById('zoom-content');
        
        // 计算当前位置的缩放比例
        var zoomLevel = 2; // 设置为2表示放大两倍，可以根据需要调整
        
        // 应用缩放比例到页面上
        zoomContent.style.transform = 'scale(' + zoomLevel + ')';
        
        // 根据当前位置调整滚动条位置
        var scrollX = window.pageXOffset;
        var scrollY = window.pageYOffset;
        var zoomedScrollX = scrollX * zoomLevel;
        var zoomedScrollY = scrollY * zoomLevel;
        window.scrollTo(zoomedScrollX, zoomedScrollY);
        
        // 根据当前位置调整页面内容位置
        var zoomedContentWidth = zoomContent.offsetWidth * zoomLevel;
        var zoomedContentHeight = zoomContent.offsetHeight * zoomLevel;
        var offsetX = (zoomedContentWidth - zoomContainer.offsetWidth) / 2;
        var offsetY = (zoomedContentHeight - zoomContainer.offsetHeight) / 2;
        zoomContent.style.transformOrigin = 'top left';
        zoomContent.style.transform = 'scale(' + zoomLevel + ') translate(-' + offsetX + 'px, -' + offsetY + 'px)';
    });
</script>