ラック
Home > ブログ > 記事 > 2018年3月 > DOMSubtreeModifiedをMutationObserverに変える

DOMSubtreeModifiedをMutationObserverに変える

カテゴリ: ホームページ

以前google翻訳の後ろにヘッダが隠れるのをどうにかするという話をしましたが、Firefoxの開発者ツールで下記の警告が出ていました。

Mutation Event の使用は推奨されません。代わりに MutationObserver を使用してください。

調べてみると、警告通りDOMSubtreeModifiedは非推奨扱いになっていたようです。代わりに使うのがMutationObserver。ただ、オブジェクトなので書き方が少し違います。


$(function() {
    //翻訳した場合の処理(翻訳バーの高さだけ下にずらす)
    translateBarAttachment();
    //翻訳した場合の処理(翻訳バーの高さだけ下にずらす)
    var mo = new MutationObserver(function(mutationRecords) {
        translateBarAttachment();
    });
    mo.observe(document.body, {childList: true});
});
 
//翻訳した場合の処理(翻訳バーの高さだけ下にずらす)
function translateBarAttachment() {
    var $navbar = $(".navbar");
    var $body = $("body");
    if($body.offset().top > 0){
        $navbar.css({
            "top": "40px"
        }); //翻訳バーの高さだけ下にずらす
    }
    else {
        $navbar.css({
            "top": "0"
        }); //翻訳バーの高さだけ下にずらすのを元に戻す
    }
}

動作検証はしていませんが、こんな感じのコードになる模様。

参考

タグ: javascript,トラブル対処,bootstrap

 



関連する記事一覧