概念

text-overflow

使用在包含文字節點的元素上，例如：<p>，用來表示當空間不夠文字放時，應該怎麼處理文字的顯示。

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

overflow

當子元素需要更多空間置放時，父層使用 overflow 設定要和處理子元素的顯示。

scroll

做水平或是垂直方向的 scroll (物理方向)

.parent {
  overflow-x: scroll;
  overflow-y: scroll;
}

要相對文件和 writing mode 方向的 scroll，可使用 overflow-inline 或是 overflow-block

scroll chaining

在一個 scrollable 元素中捲動內容，當到達 scrollable 元素上下左右的邊界時，會發生 chained effect，scroll 會繼續傳遞給父層，讓父層發生 scroll。例如：開啟 Modal 捲動到底部，繼續捲動時會讓背景或是父層容器的內容也跟著捲動。

可使用overflow-behavior 來控制當捲動到邊界時的行為，例如：

• auto (預設值)：允許 scroll 傳遞到父層
• contain：只在該元素上做捲動
• none：不會發生 chaining，同時也阻止滾動到邊界時的反彈和刷新頁面的效果 (overscroll affordance )

參考資源

MDN Web Docs - Scroll chaining
防禦性 CSS - 建立「防患未然」的匠人心態 - 【Day16】滾動條 - 避免滾動穿透