키보드가 열려 있는 경우에도 요소를 하단에 고정된 상태로 유지하는 방법-CSS 튜토리얼-php.cn

키보드가 열려 있는 경우에도 요소를 하단에 고정된 상태로 유지하는 방법

WBOY

풀어 주다： 2024-08-10 08:59:33

원래의

843명이 탐색했습니다.

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

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

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

로그인 후 복사

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

How to keep an element fixed at the bottom, even when the keyboard is open

수정된 부분을 수정하려면 JS가 필요한 것 같습니다.

시각적 뷰포트

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

How to keep an element fixed at the bottom, even when the keyboard is open

수학

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

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

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

로그인 후 복사