Skip to content

Instantly share code, notes, and snippets.

@MartijnHols

MartijnHols/useDocumentHeight.ts

Last active September 12, 2025 14:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MartijnHols/e9f4f787efa9190885a708468f63c5bb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MartijnHols/e9f4f787efa9190885a708468f63c5bb to your computer and use it in GitHub Desktop.
Download ZIP
React hooks for getting the document height that updates when the On Screen Keyboard/Virtual Keyboard toggles
Raw
useDocumentHeight.ts
The latest version is available at https://martijnhols.nl/gists/how-to-get-document-height-ios-safari-osk
Raw
useOnScreenKeyboardScrollFix.ts
import { useEffect } from 'react'
const useOnScreenKeyboardScrollFix = () => {
useEffect(() => {
const handleScroll = () => {
window.scrollTo(0, 0)
}
window.addEventListener('scroll', handleScroll)
return () => {
window.removeEventListener('scroll', handleScroll)
}
}, [])
}
export default useOnScreenKeyboardScrollFix
@komagroup
Copy link

komagroup commented Jun 28, 2024 •
edited
Loading

It seems to work if I adjust the maxHeight instead of the height and it has a h-full class from tailwind ( which is just height:100% )

import { ElementType, HTMLAttributes } from "react";
import useViewportSize from "@/hooks/useViewportSize";
import useOnScreenKeyboardScrollFix from "@/hooks/useOnScreenKeyboardScrollFix";
import usePreventOverScrolling from "@/hooks/usePreventOverScrolling";
import useIsOnScreenKeyboardOpen from "@/hooks/useOnScreenKeyboardOpen";

interface Props extends HTMLAttributes<HTMLDivElement> {
  element?: ElementType;
}

export function FullViewportContainer({
  element: Element = "div",
  ...others
}: Props) {
  useOnScreenKeyboardScrollFix();
  const [, viewportHeight] = useViewportSize()  ?? [];
  const ref = usePreventOverScrolling();
  const isOnScreenKeyboardOpen = useIsOnScreenKeyboardOpen();
  return (
    <Element
      {...others}
      ref={ref}
      className="w-full h-full"
      style={{
        maxHeight: viewportHeight,
        padding: isOnScreenKeyboardOpen
          ? "env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)"
          : "env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)",
        transition: "padding 100ms, height 100ms",
      }}
    />
  );
}

Aaaand it must be the direct children of the root it seems

@iPommes
Copy link

iPommes commented Dec 29, 2024

Little tricky. Sucks that mobile-PWA development is so harsh sometimes. But this solution works like a charm. Love it. Many thanks!

@tomdyqin
Copy link

tomdyqin commented Jan 1, 2025

when i use useOnScreenKeyboardScrollFix, the scroll content in FullViewportContainer will stop scroll, so i can not scroll into view on focusin

@tomdyqin
Copy link

tomdyqin commented Jan 1, 2025

how can i get keyboard height

@noah-jacksonn
Copy link

noah-jacksonn commented Sep 12, 2025

Hi @MartijnHols, First of all, thank you so much for your work!!! I have the same issue on my app and I implemented your solution and it works but most of the time when the keyboard is open and the screen resizes + the scroll to top emitting, there is a glitch that the app slides from the bottom to the top... Here is an example, first focus has the glitch and the second don't:

Screen.Recording.2024-06-23.at.12.45.24.mov

same problem here. did you end up getting a fix?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment