Skip to main content


The useScrollPosition() hook allows you to fetch the window's scroll height/width in real time and to programatically set them by using the provided method.


import { useScrollPosition } from 'react-haiku';


Current Position: X: 0, Y: 0!
import { useScrollPosition } from 'react-haiku';

export const Component = () => {
const [scroll, setScroll] = useScrollPosition();

return (
<b>Current Position: {`X: ${scroll.x}, Y: ${scroll.y}`}!</b>
<button onClick={() => setScroll({ y: document.body.scrollHeight })}>
Scroll To Bottom


  • scroll – contains the x and y values of the window's scroll position
  • setScroll - used for programatically scrolling inside the active viewport