> 웹 프론트엔드 > CSS 튜토리얼 > 키보드가 열려 있는 경우에도 요소를 하단에 고정된 상태로 유지하는 방법

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

WBOY
풀어 주다: 2024-08-10 08:59:33
원래의
862명이 탐색했습니다.

안녕하세요 개발자 여러분! 나는 메모 앱을 작업하면서 이것을 발견했습니다.
내 앱을 사용한 게시물은 다음과 같습니다.
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>
    </>
  );
};

로그인 후 복사

최종 결과

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

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

위 내용은 키보드가 열려 있는 경우에도 요소를 하단에 고정된 상태로 유지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿