[js] スマートフォンのアドレスバーを、コンテンツの高さが足りないときでも非表示にする（改良版）

Tweet

Share on Tumblr

Pocket

前回から改良したので、別記事にしました。
基本的な処理はほとんど変わっていませんが少し改良しています。

• スクロールの判定方法を変更
• アドレスバーが消えたときのイベントが取得できるようになった

Demo

デモ（別ウィンドウで開きます）

Source

hide_address_bar.min.js(圧縮版)
hide_address_bar.js
hide_address_bar.coffee

Usage

基本はjsを読み込むだけです。アドレスバー非表示のイベントを取得する場合、jsを記述します。

<script src="js/hide_address_bar.js"></script> <script> // アドレスバー非表示のイベントを取得 window.addEventListener("hideAddressBar", function (e) { // 例えば、アドレスバーが非表示になったときの画面の高さを // bodyのdata属性（data-window-height）に設定する document.body.setAttribute("data-window-height", window.innerHeight); }); </script> </script>

<script src="js/hide_address_bar.js"></script> <script> // アドレスバー非表示のイベントを取得 window.addEventListener("hideAddressBar", function (e) { // 例えば、アドレスバーが非表示になったときの画面の高さを // bodyのdata属性（data-window-height）に設定する document.body.setAttribute("data-window-height", window.innerHeight); }); </script> </script>