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 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 so, als ob wir das Problem beheben könnten, 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.

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!