CSS変数とJavaScriptで変化するCSSパラメータ

CSS変数を使用してJavaScriptで値を変化させる必要がありましたので、メモします。

発生した問題

WordPressにて、Gallery by supsysticを使っています。

このギャラリープラグインは、画像をクリックすると、ポップアップ表示され、画面スクロールにも追随してくれます。

しかし、あるサイトで、「特定のページのみ」ポップアップがかなりずれて下のほうに表示されてしまいました。

以下のアプローチを検証してみました。

jQueryで直接topの値を変更

変更されませんでした。プラグイン内部などを触らなければいけない予感がしたため、この方向性で修正することは断念しました。

CSSで直接スタイルをあてる

ポップアップする画像には、クラスが付与されていたため、style.cssにスタイルをあてることでtopのプロパティを変更できました。もちろんimportant指定です。

ということで、CSSで強制的にtopの値を書き換える、という方法で行こうと考えました。

CSSの値をjavascriptで書き換える

といっても、固定値のCSSを上書きしてもウィンドウスクロールに追従してくれないため、CSS変数を使用して、その値をjavascriptから書き換える、という方法をとりました。

CSS変数は以下のように定義します。

:Root{
--top-val: 100px;
}

.page-id-43 div.pp_pic_holder{
top: var(--top-val) !important;
}

.page-id-43は、43のIDの固定ページのみに限定しています。

Gallery by supsysticのポップアップはpp_pic_holderというクラスをもっているため、これにtopの値を書き込みます。

CSS変数は、

var(–top-val);のように、定義できます。また、初期値としてRootというセレクタを用意して100pxをいれています。

次に、JavaScriptをかきます。

今回は、シンプルにheader.phpにscriptタグを使用して記述します。

<script>
  window.addEventListener('scroll', () => {
    var sc_val = (window.pageYOffset + 100) +"px";
    const Root = document.documentElement;
    const body = document.body;
    Root.style.setProperty('--top-val', sc_val);
  }, false);
</script>

javascriptのスクロール時に実行されるようにします。

スクロール時に、sc_valにウィンドウのＹ方向のスクロール量を取得して、「px」文字を追加しました。（100を足しているのはポップアップ画像はウィンドウの上から100px下げて表示させたいためです。）

最後に、setPropertyメソッドで先ほどCSSで定義した変数に入れます。

こうすることで、ウィンドウスクロールに追従してtopの値を変更するということを強制的に書き換えることができました。