Scrollable - showcase ability to set the scroll from outside, programmatically

[yairEO]

Currently the Scrollable demos only showcase the ability to control the scroll using the dedicated <Scrollable.VerticalScrollbar> component, which has a unique access to the context.

This ability (control the scroll position) is also important to have from any other component on the page.

Below is a non-tested idea for such a demo:

const getVerticalMiddleDistanceInPx = elem => ...

const OutsideScrollControl = ({children}) => {
    const scrollRef = useRef();

    const scrollTo = (top, left) => {
      scrollRef.current.scroll({top,  left, behavior: 'smooth'})
    }

    return <>
      <button onClick={scrollTo(0)}>scroll to top</button>
      <button onClick={scrollTo( getVerticalMiddleDistanceInPx(scrollRef.current) )}>scroll to middle</button>
      <button onClick={scrollTo(100, 100)}>scroll 100px vertical  & horizontal</button>

      <Scrollable element={<div ref={scrollRef}/>}>
          imagine long content...
      </Scrollable>
    </>
}