overflowプロパティのhiddenとclipの違いとユースケース

overflowプロパティにはhiddenとclipという似たような挙動をする値がある。どちらもコンテンツが溢れたときに非表示にする値だが、ユースケースは異なる。

overflow: hidden

hiddenは溢れたコンテンツは非表示にされるが、スクロールコンテナを生成するためscrollToなどのAPIを使うことでJavaScriptからスクロールできる。

さらにhiddenはoverflow-xやoverflow-yで非表示にする方向を指定しても、水平方向（X軸）と垂直方向（Y軸）の両方でクリッピングが発生する。

<section class="container">
  <p>...</p>
  <img class="symbol" src="..." />
</section>

.container {
  overflow-y: hidden;
  max-height: 200px;
  position: relative;
}

.symbol {
  position: absolute;
  bottom: -50px;
  right: -50px;
}

const container = document.querySelector('.container')

// スクロールすることで非表示コンテンツも表示できる
container.scrollTo({
  top: 100,
})

デモ: overflow: hidden

ScrollTo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

overflow: clip

clipは溢れたコンテンツを非表示にするところはhiddenと同じだが、スクロールコンテナを生成しないのでJavaScriptを使ってもスクロールできない。

さらにclipはoverflow-xやoverflow-yで非表示にする方向を指定できる。

.container {
  overflow-y: clip;
  max-height: 200px;
  max-width: 200px;

  position: relative;
}

.symbol {
  position: absolute;
  bottom: -50px;
  right: -50px;
}

const container = document.querySelector('.container')

// スクロールできない
container.scrollTo({
  top: 100,
})

デモ: overflow: clip

ScrollTo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

まとめ