Cara mengekalkan elemen tetap di bahagian bawah, walaupun apabila papan kekunci dibuka

Hei pengembang! Saya menemui ini semasa bekerja pada apl pengambilan nota saya.
Berikut ialah siaran menggunakan apl saya.
Berkongsi kemajuan di X (Twitter)

Pernahkah anda terkejut bahawa CSS tidak berfungsi seperti yang anda jangkakan?
Itu berlaku kepada saya (sekali lagi) apabila saya menetapkan elemen untuk dibetulkan di bahagian bawah dan kemudian membuka papan kekunci pada iPhone saya.

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

Apa yang saya lihat ialah elemen itu tidak kelihatan sama sekali.
Kerana ia telah ditetapkan. Ke bawah. Di belakang papan kekunci.

Nampaknya untuk membetulkan yang telah diperbaiki kami memerlukan beberapa JS.

VisualViewport

Terdapat API penyemak imbas dengan sokongan yang baik yang boleh digunakan untuk tujuan ini: VisualViewport.
Ia mengembalikan lebar dan ketinggian tempat pandang yang boleh dilihat sebenar. Pautan MDN ke dokumen.
Walau bagaimanapun, lakukan penyiasatan anda sendiri untuk melihat sama ada ia disokong untuk versi yang anda sasarkan.

Matematik

Pada asasnya, kita perlu mengendalikan kedudukan elemen berkenaan dengan port pandangan visual, serta kedudukan tatal dan ketinggian elemen. Mari kita buat matematik.

Selain itu, memandangkan matematik adalah lebih mudah dengan cara ini, masuk akal untuk menggunakan parameter atas dan bukannya bawah.

top = viewport height + scroll - element height

Perlaksanaan

Saya akan menggunakan React. Untuk sebarang rangka kerja lain, anda hanya boleh menyalin kandungan cangkuk 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>
    </>
  );
};

Keputusan akhir

Saya juga perlu menambah beberapa animasi dan menyembunyikan blok saya pada skrol, tetapi anda tidak perlu berbuat demikian dan ia akan sentiasa kelihatan.

Atas ialah kandungan terperinci Cara mengekalkan elemen tetap di bahagian bawah, walaupun apabila papan kekunci dibuka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!