溢出 (Overflow)
控制内容超出容器尺寸时的行为。
overflow 属性指定当内容大于容器盒子时发生的情况。
取值
| 值 | 描述 |
|---|---|
Visible | 默认值。内容流出容器外。 |
Hidden | 内容在容器边缘被裁剪。 |
Scroll | Taffy 为滚动条预留空间(如果已配置),但它不会渲染滚动条。 |
滚动条尺寸
在 Taffy 中,Overflow.Scroll 通常用于表示节点可以滚动。Taffy 会计算 scrollbarSize,你可以从布局输出中读取它。
const tree = new TaffyTree(); const style = new Style({ overflow: { x: Overflow.Scroll, y: Overflow.Scroll }, scrollbarWidth: 15, // 用于设置预估滚动条尺寸的辅助选项 }); // 布局计算后: const node = tree.newLeaf(style); tree.computeLayout(node, { width: 100, height: 100 }); const layout = tree.getLayout(node); console.log( `Scrollbar Size: ${layout.scrollbarWidth} x ${layout.scrollbarHeight}`, );
示例
Loading Preview…