Skip to content
Sancho UI
Toggle dark mode
Getting started
Components
Helpers
Built with ☕ by
Ben McMahen

ScrollView

A ScrollView provides a vertically or horizontally scrollable view which works nicely with touchable elements such as ListItem. It was originally built for use by the Tabs component, but you may find it useful yourself for doing things like animated scrolling.

Basic usage

function AnimatedScroll() {
  const ref = useRef();

  function scrollDown() {
    // scroll to x, y coordinattes
    ref.current.scrollTo(undefined, 400);
  }

  function scrollUp() {
    ref.current.scrollTo(undefined, 0);
  }

  return (
    <ScrollView overflowY style={{ height: "300px" }} ref={ref}>
      <div style={{ height: "600px" }}>
        <button onClick={scrollDown}>scroll down</button>
      </div>
      <button onClick={scrollUp}>scroll to top</button>
    </ScrollView>
  );
}

API

ScrollView
overflowYboolean
enable overflow-y scrolling
overflowXboolean
enable overflow-x scrolling
scrollAnimationConfigSpringConfig
spring animation configuration
innerRefRefObject<any>
access to ref dom element
cssInterpolationWithTheme<any>