【CSS】overflow: clipについて

概要

• はみ出したコンテンツを視覚的に隠す
• プログラムによるスクロールを完全に無効化
• 要素はスクロールコンテナではなくなる

スクロール無効化の挙動

// overflow: clipの場合
const clipElement = document.getElementById("clip");
clipElement.scrollTop = clipElement.scrollHeight; // 動作しない

軸ごとの独立制御

overflow: clipでは軸間の依存関係がありません。

/* 正常動作:x軸は表示、y軸はクリップ */
.element {
  overflow-x: visible;
  overflow-y: clip;
}

参考