目次
タイトルの通りなんですが、tailwind cssを使っていてstickyが効かいことがありました。
無事対処できたので、備忘録を残します。
原因
親または祖先要素（コンポーネント）にoverflow-hiddenが存在しているとstickyは効かなくなるみたいです。
なぜoverflow-hiddenがstickyに影響を与えるのか
overflow-hiddenとstickyに対応するcssであるoverflow: hiddenおよびposition: stickyについて説明します。
- スクロールの仕組み:
position: stickyが機能するためには、要素がスクロールする祖先要素に対して相対的に固定される必要があります。overflow: hiddenはスクロールバーを表示しないため、ユーザーにとって視覚的にはスクロールの仕組みを持たないように見えますが、内部的には要素がスクロールコンテキストを持つとみなされます。 - 固定される位置の計算:
position: stickyは、要素がスクロールする祖先要素の境界に基づいて位置を計算します。祖先要素にoverflow: hiddenが設定されていると、その要素がスクロールコンテキストを持つため、sticky要素はその中で固定位置を計算しますが、スクロールが発生しないため実際には固定されません。
すなわちoverflow-hiddenもスクロールの仕組みを持つ要素とされるため、stickyが効かなくなります。
解決法
当たり前ではありますが、原因であるoverflow-hiddenを削除すればstickyが効くようになります。
overflow-hiddenとstickyを併用したい。
overflow-clipを使う
overflow-hiddenでやっていたようなことをstickyを聞く状態でやりたい場合はoverflow-hiddenではなくoverflow-clipを使うと良いみたいです。
なぜoverflow-clipだとstickyが使えるのか？
overflow-clipとstickyに対応するcssであるoverflow: clipおよびposition: stickyについて説明します。
- スクロールコンテキストを作成しない:
overflow: clipはスクロールコンテキストを作成しないため、position: stickyの動作を妨げません。 - 単に内容を隠す:
overflow: clipは要素の内容がコンテナの境界を超えた場合にその部分を隠すだけであり、スクロールバーは表示されません。 - stickyの位置計算に影響を与えない:
overflow: clipは要素の位置計算に影響を与えないため、sticky要素が正しく機能します。
すなわちoverflow-clipは、スクロールの仕組みを持たない要素とされるため、stickyが機能します。
参考
