キーボードが開いているときでも要素を下部に固定しておく方法

開発者の皆さん！メモアプリを使っているときにこれを発見しました。
こちらは私のアプリを使った投稿です。
X（Twitter）で進捗状況を共有

CSS が期待どおりに機能しないことに驚いたことはありますか?
要素を下部に固定するように設定し、iPhone でキーボードを開いたときに、同じことが (再び) 起こりました。

<div className="fixed bottom-0" />

私が見たのは、その要素がまったく表示されていないということです。
固定されているからです。底まで。キーボードの後ろ。

修正するには JS が必要なようです。

ビジュアルビューポート

これらの目的に使用できる優れたサポートを備えたブラウザ API が VisualViewport です。
実際に表示されているビューポートの幅と高さを返します。 MDN のドキュメントへのリンク。
ただし、対象とするバージョンがサポートされているかどうかを独自に調査してください。

数学

基本的に、スクロール位置と要素の高さだけでなく、ビジュアルビューポートに対する要素の位置も処理する必要があります。計算してみましょう。

また、この方法では計算がはるかに簡単になるため、下位パラメータの代わりに上位パラメータを使用するのが理にかなっています。

top = viewport height + scroll - element height

実装

React を使用します。他のフレームワークの場合は、useEffect フックのコンテンツをコピーするだけです。

import { useEffect, useState } from 'react';
import classNames from 'classnames';
import { useDebounce } from 'use-debounce';

const elementHeight = 55; // elem. height in pixels
// It's also a good idea to calculate it dynamically via ref

export const FixedBlock = () => {
  // top postion -> the most important math result goes here
  const [top, setTop] = useState(0);

  useEffect(() => {
    function resizeHandler() {
      // viewport height
      const viewportHeight = window.visualViewport?.height ?? 0;
      // math
      setTop(viewportHeight + window.scrollY - elementHeight)
    }

    // run first time to initialize 
    resizeHandler();

    // subscribe to events which affect scroll, or viewport position
    window.visualViewport?.addEventListener('resize', resizeHandler);
    window.visualViewport?.addEventListener('scroll', resizeHandler);
    window?.addEventListener('touchmove', resizeHandler);

    // unsubscribe
    return () => {
      window.visualViewport?.removeEventListener('resize', resizeHandler);
      window.visualViewport?.removeEventListener('scroll', resizeHandler);
      window?.removeEventListener('touchmove', resizeHandler);
    };
  }, [debouncedScroll]);

  return (
    <>
      <div
        className={classNames(
          'absolute left-0 top-0', // <-- attention, it's absolute
          top === 0 && 'hidden'    // while calculating, we don't need to show it 
        )}
        style={{ transform: `translateY(${debouncedTop}px)` }}
      >
        I am fixed
      </div>
    </>
  );
};

最終結果

アニメーションを追加して、スクロール時にブロックを非表示にする必要もありましたが、その必要はなく、ブロックは常に表示されます。

以上がキーボードが開いているときでも要素を下部に固定しておく方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。