LoginSignup
1
0

More than 1 year has passed since last update.

nuxt.jsで作ったサイトでposition:stickyが効かないのはbodyにデフォルトで当たるoverflowが悪かった

Last updated at Posted at 2022-01-16

先に結論:nuxt.config.jsに下記のように書くことでposition:sticky;が効くようになります

nuxt.config.js
bodyAttrs: {
    style: 'overflow: unset!important;'
},

注意点

逆にbodyoverflow: hidden;などを当てたいときに困ります。特にモーダルとかの実装。htmloverflow: hidden;を設定するなどの副次的な対応が必要になると思います。
ということは、この対応法は少なくともBestな方法ではないので、他の方法があればご教授いただければ幸いです。


さて、上記でstickyが動くようになった場合、なぜそれで直るのかも一応知っておいたほうがよいかもしれないので、書いておきます。

前提1:stickyしたい要素の親にoverflowの値が設定されているとstickyが効かなくなる

なお粘着要素は、直近の祖先がスクロールしない場合でも、「スクロールの仕組み」を持つ直近の祖先 (overflow が hidden, scroll, auto, overlay として作成されたもの) に「粘着」します。これによって「粘着」のふるまいを効果的に抑止します (GitHub issue on W3C CSSWG を参照)。
position - CSS: カスケーディングスタイルシート

前提2:bodyにoverflowの値がstyleで指定されている

前提1を踏まえてposition: sticky;を適用した要素の親をブラウザで順番に見ていくと、なんとbodyが下記のようになっていました。

style
body {
    overflow: scroll!important;
}

このとき厄介なのがstyleによって指定されていることです。このことが意味するのは、CSSの上書きでは十中八九打ち勝てないことを意味しています。ご丁寧に!importantまでされていますので、それはより濃厚です。実際、nuxt.config.jsを編集し、bodyにclassを指定し、それによってこのoverflowを上書きすることも試しましたが無駄でした。

nuxt.config.js
bodyAttrs: {
    class: 'overflow-unset'
},
// この場合、classは当たるが、styleには打ち勝てない



ということで、nuxt.config.jsbodystyle属性値をセットすることで無理やりstickyを動作させるというtipsでした。
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0