안녕하세요 개발자 여러분! 나는 메모 앱을 작업하면서 이것을 발견했습니다.
내 앱을 사용한 게시물은 다음과 같습니다.
X에서 진행 상황 공유(Twitter)

CSS가 예상대로 작동하지 않는다는 사실에 놀란 적이 있나요?
하단에 고정되도록 요소를 설정한 다음 iPhone에서 키보드를 열었을 때 그런 일이 (다시) 일어났습니다.

내가 본 것은 그 요소가 전혀 보이지 않는다는 것입니다.
왜냐하면 그것은 고정되어 있기 때문입니다. 바닥으로. 키보드 뒤에 있습니다.

JS가 필요한 문제를 수정하려는 것 같습니다.

시각적 뷰포트

이러한 목적으로 사용할 수 있는 좋은 지원 기능을 갖춘 브라우저 API가 있습니다: VisualViewport.
실제 보이는 뷰포트의 너비와 높이를 반환합니다. 문서에 대한 MDN 링크.
하지만 대상 버전에서 지원되는지 직접 조사해 보세요.

수학

기본적으로 시각적 뷰포트를 기준으로 요소의 위치는 물론 스크롤 위치와 요소의 높이도 처리해야 합니다. 수학을 해보자.

또한 수학이 이 방법으로 훨씬 간단하므로 하단 매개변수 대신 상단 매개변수를 사용하는 것이 합리적입니다.

top = viewport height   scroll - element height

구현

저는 React를 사용하겠습니다. 다른 프레임워크의 경우 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 (
    
      

        I am fixed
      
    >
  );
};

최종 결과

또한 몇 가지 애니메이션을 추가하고 스크롤 시 블록을 숨겨야 했지만 그렇게 할 필요는 없으며 항상 표시됩니다.