So bleibt ein Element unten fixiert, auch wenn die Tastatur geöffnet ist

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 und dann die Tastatur auf meinem iPhone geöffnet habe.

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

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

Scheint so, als würden wir das Problem 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 (
    <>
      <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>
    </>
  );
};

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.

Das obige ist der detaillierte Inhalt vonSo bleibt ein Element unten fixiert, auch wenn die Tastatur geöffnet ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!