オーバーフロー (Overflow)

コンテンツがコンテナのサイズを超えた場合の動作を制御します。

overflow プロパティは、コンテンツがコンテナボックスより大きい場合に何が起こるかを指定します。

値

スクロールバーのサイズ

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}`,
);

例

次のステップ

• コアコンセプト
• サイジング (Sizing)