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>
	</>
}