overflow-y:autoから要素をはみ出させる

今まで知らなかったことだったので備忘のために書きます。

要素がはみ出ない

例えばリストがスクロールするようなUIがあるとします。

See the Pen Untitled by ryokatsuse (@ryokatsuse) on CodePen.

この例では、ツールチップっぽいものをリストの途中にある「ツールチップ出現」をホバーした時にリストの外側に出現させたいとします。しかしこの例では、外側には配置することが出来ません。このツールチップはposition: absolute;で配置しているのですが、大枠のリストにはoverflow-y:autoが指定してあるのでスクロール領域の外側に要素をはみ出すことができないような状態になっています。

ここで考えたのは、「じゃあoverflow-x:visibleすればいけるかも？」と思いscroll-navのクラスに追加しました。しかしこれでも表示することができません。

調べてみるとMDNに記載がありました。

一方の軸をvisible (既定値) に設定して、もう一方を他の値に設定すると、 visible は auto として動作する結果になります。

どうやら片方にvisibleをしても計算的にはautoになってしまうっぽいです。

解決策

scroll-navの直下のliタグについているposition: relativeを外すと外側にはみ出して表示することができます。この時ツールチップは、absoluteをしているため一番近い祖先に基づいてツールチップが配置されます。例ではul要素しかないためbodyタグの相対配置に表示されます。はみ出したら後はなんとかCSSで位置調整する感じになります。

参照記事

overflowって深く考えたことがなく、xとyをそれぞれ指定したときの挙動までは把握していなかったので勉強になりました。

overflow-clip-margin(おまけ)

何か面白そうなCSSプロパティを、overflowを調べた流れで見つけました。

これは、overflow: clip;が指定された時に使えるものです。clipはほとんどhiddenと変わらないのですが、clipを指定すると要素内での全てのスクロール（自動のスクロールバーも含む）を禁止するという違いがあります。

overflow-clip-marginには、普通のmarginのように20pxなどの単位が指定できます。指定した単位がコンテンツがclipを超えて表示できる範囲になるようです。

正直言うとユースケースが想像できないのと、現状Firefoxが未対応ということもあり使うことはなさそうですが、面白かったので紹介しました。

以下の参照記事にあるCodePenのサンプルを見ると動きが確認できます。