Comment garder un élément fixe en bas, même lorsque le clavier est ouvert

Salut les développeurs ! J'ai découvert cela en travaillant sur mon application de prise de notes.
Voici un article utilisant mon application.
Partager les progrès sur X (Twitter)

Avez-vous déjà été surpris que CSS ne fonctionne pas comme vous l'espériez ?
Cela m'est (encore) arrivé lorsque j'ai fixé un élément à fixer en bas et que j'ai ensuite ouvert le clavier de mon iPhone.

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

Ce que j'ai vu, c'est que cet élément n'est pas visible du tout.
Parce que c'est réparé. Vers le bas. Derrière le clavier.

On dirait que pour réparer le correctif, nous avons besoin de JS.

VisualViewport

Il existe une API de navigateur avec un bon support qui peut être utilisée à ces fins : VisualViewport.
Il renvoie la largeur et la hauteur de la fenêtre visible réelle. Lien MDN vers la documentation.
Cependant, faites votre propre enquête pour voir s'il est pris en charge pour les versions que vous ciblez.

Mathématiques

Fondamentalement, nous devons gérer la position de l'élément par rapport à la fenêtre d'affichage visuelle, ainsi que la position de défilement et la hauteur de l'élément. Faisons le calcul.

De plus, comme le calcul est beaucoup plus simple de cette façon, il est logique d'utiliser le paramètre top au lieu du paramètre bottom.

top = viewport height + scroll - element height

Mise en œuvre

J'utiliserai React. Pour tout autre framework, vous pouvez simplement copier le contenu du hook 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>
    </>
  );
};

Résultats finaux

J'avais également besoin d'ajouter quelques animations et de masquer mon bloc lors du défilement, mais vous n'êtes pas obligé de le faire et il sera toujours visible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!