Hey Entwickler! Ich habe das entdeckt, als ich an meiner Notizen-App gearbeitet habe.
Hier ist ein Beitrag, der meine App verwendet.
Teilen Sie den Fortschritt auf X (Twitter)

Waren Sie jemals überrascht, dass CSS nicht so funktioniert, wie Sie es erwartet haben?
Das ist mir (wieder) passiert, als ich ein Element unten fixiert eingestellt habe und dann die Tastatur auf meinem iPhone geöffnet habe.

Was ich gesehen habe, ist, dass dieses Element überhaupt nicht sichtbar ist.
Weil es behoben ist. Nach unten. Hinter der Tastatur.

Scheint das Problem zu beheben, wir brauchen etwas JS.

VisualViewport

Es gibt eine Browser-API mit guter Unterstützung, die für diese Zwecke verwendet werden kann: VisualViewport.
Es gibt die Breite und Höhe des tatsächlich sichtbaren Ansichtsfensters zurück. MDN-Link zu Dokumenten.
Führen Sie jedoch selbst eine Untersuchung durch, um festzustellen, ob es für die Versionen, auf die Sie abzielen, unterstützt wird.

Mathe

Grundsätzlich müssen wir die Position des Elements in Bezug auf das visuelle Ansichtsfenster sowie die Bildlaufposition und die Höhe des Elements verwalten. Lass uns rechnen.

Da die Mathematik auf diese Weise viel einfacher ist, ist es außerdem sinnvoll, den oberen Parameter anstelle des unteren zu verwenden.

top = viewport height   scroll - element height

Durchführung

Ich werde React verwenden. Für jedes andere Framework können Sie einfach den Inhalt des useEffect-Hooks kopieren.

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 (
    
      

        I am fixed
      
    >
  );
};

Endgültige Ergebnisse

Ich musste auch einige Animationen hinzufügen und meinen Block beim Scrollen ausblenden, aber das ist nicht nötig und er wird immer sichtbar sein.