subscribeKeyboardHeight
subscribeKeyboardHeight は、画面上のキーボードの高さの変化を購読するユーティリティ関数です。
指定したコールバックは、キーボードの表示、非表示、サイズ変更など、 キーボードの高さが変わる可能性があるたびに呼び出されます。
内部では、Visual Viewport の resize イベントと scroll イベントの 両方を監視します。
resize: ビジュアルビューポートの高さが変わったときに発生しますscroll: ビジュアルビューポートのオフセットが変わったときに発生します (サイズが変わらずにビューポートが移動することがある iOS で重要です)
パフォーマンスの最適化:
- デフォルトでスロットリング(16ms、約 60fps)を行い、コールバックの過剰な呼び出しを防ぎます
- 高さが変わっていない場合はコールバックを呼び出しません(重複排除)
インターフェース
ts
function subscribeKeyboardHeight(
options: SubscribeKeyboardHeightOptions
): SubscribeKeyboardHeightResult;パラメータ
- optionsrequired · SubscribeKeyboardHeightOptions
設定オプション
- options.callbackrequired · (height: number) => void
更新されたキーボードの高さをピクセル単位で受け取る関数。
- options.immediateboolean · false
true の場合、現在のキーボードの高さを引数としてコールバックを即座に呼び出します。
- options.throttleMsnumber · 16
スロットリングの間隔(ミリ秒単位)。
- options.callbackrequired · (height: number) => void
戻り値
- SubscribeKeyboardHeightResult
購読を解除する関数を含むオブジェクト。
- unsubscribe() => void
すべてのリスナーの登録を解除し、キーボードの高さの更新の受信を停止します。
- unsubscribe() => void
使用例
tsx
const { unsubscribe } = subscribeKeyboardHeight({
callback: height => {
footer.style.paddingBottom = `${height}px`;
},
immediate: true,
});
// 後でクリーンアップが必要になったときに実行します
unsubscribe();