CSSの[position:fixed]で固定している要素を横スクロールさせる方法

CSSの[position:fixed]で要素を固定すると、ブラウザ幅がコンテンツ幅を下回った際に固定している要素だけ横スクロールしてくれません

コードが書かれたモニター

最近のWEBサイトはほとんどレスポンシブ対応なので、該当するケースは少ないと思いますが、古いサイトを改修する時にハマったので備忘録兼Tipsとして紹介します。

固定している要素を横スクロールさせる方法

私を含め、ほとんどの方が要素に[overflow-x:scroll]など入れてみたりすると思いますが、[position:fixed]はそんなことではビクともしません(笑)

対処方法としては、JavaScriptを利用します。

横スクロール発生時に[position:fixed]が適用されている部分のleft値が変わるようにすれば、leftが0pxで固定されないためスクロールできるようになります。

$(window).on("scroll", function(){
    $("fixedしている要素").css("left", -$(window).scrollLeft());
});

参考サイト:CSSのfixedを適用していると横スクロール時に一部非表示になることがある

こんな記事も読まれてます

この記事が気に入ったら
「いいね!」しよう

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

コメント