typescript 滚轮放大布局

在 TypeScript 中，滚轮放大布局通常是指利用 HTML5 的 `<div>` 元素配合 CSS 和 JavaScript 实现的一个交互式功能，允许用户通过鼠标滚轮来缩放视图内的内容。这种布局常用于地图、图片查看器或需要精细调整大小的界面。

以下是实现一个基本的滚轮放大布局的基本步骤：

1. **HTML 结构**:
创建一个容器元素，并设置初始样式，如 `position: relative` 和 `overflow: hidden`，以便隐藏溢出的内容。

   <div id="zoom-container">
     <!-- 内容将在这里滚动 -->
   </div>

2. **CSS 配置**:
定义基础样式和缩放样式，比如设置默认缩放比例和缩放后的最大/最小值。

   #zoom-container {
     position: relative;
     width: 100%;
     height: 100%;
     transform: scale(1);
   }

   /* 添加滚动事件 */
   :root {
     touch-action: manipulation; /* 支持触摸设备 */
   }

3. **JavaScript (TypeScript)**:
使用 `window.addEventListener('wheel', handleWheel)` 来监听滚轮事件，然后处理 `deltaY` 或 `deltaX` 变化来调整容器的缩放比例。

   function handleWheel(event: WheelEvent) {
     event.preventDefault();
     const delta = Math.sign(event.deltaY); // -1 for scroll up, 1 for scroll down

     let scale = 1 + (delta * 0.1); // 缩放步长
     if (scale > 1.5 || scale < 0.5) {
       scale = Math.max(0.5, Math.min(scale, 1.5)); // 确保在合理范围内
     }

     document.getElementById('zoom-container').style.transform = `scale(${scale})`;
   }

这只是一个基础示例，实际应用可能需要考虑更多细节，例如保存缩放状态、触控支持等。