即使鍵盤打開，如何將元素固定在底部

嘿開發者！我在開發我的筆記應用程式時發現了這一點。
這是使用我的應用程式的帖子。
在 X (Twitter) 分享進展

您是否曾因 CSS 沒有以您預期的方式工作而感到驚訝？
當我將一個元素設定為固定在底部，然後打開 iPhone 上的鍵盤時，這種情況再次發生在我身上。

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

我所看到的是該元素根本不可見。
因為它是固定的。到底部。鍵盤後面。

似乎要修復這個問題，我們需要一些 JS。

視覺視窗

有一個具有良好支援的瀏覽器 API 可用於這些目的：VisualViewport。
它傳回實際可見視口的寬度和高度。 MDN 文件連結。
但是，請自行調查，看看您的目標版本是否支援它。

數學

基本上，我們需要處理元素相對於視覺視窗的位置，以及滾動位置和元素的高度。讓我們算一下。

此外，由於這種方式的數學要簡單得多，因此使用頂部參數而不是底部參數是有意義的。

top = viewport height + scroll - element height

執行

我將使用 React。對於任何其他框架，您只需複製 useEffect hook 的內容即可。

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>
    </>
  );
};

最終結果

我還需要添加一些動畫並隱藏滾動上的區塊，但您不必這樣做，它始終可見。

以上是即使鍵盤打開，如何將元素固定在底部的詳細內容。更多資訊請關注PHP中文網其他相關文章！