react-simple-scroll-container

A simple scrolling container for react.

Table of Contents

• API
  • ScrollSection
  • ScrollTo
  • ScrollContainer
• Examples

Api

ScrollContainer

| Prop | Type | What does it do | | :-------- | :---- | :-------- | | ContainerId | String | The id of the container to use for navigation. | | ExtraStyle | Object | Inline css object to be added to the container div. | | ExtraClass | String | Extra classname(s) to be added to the container div. | | TopScroll | Bool | Should container detect the currently active top element. | | TopScrollCallback | Func | Callback which provides the new active element. | | TopScrollOffset | Number | This is a small offset for the active scrolling detection, default is 10 pixels. |

ScrollTo

| Prop | Type | What does it do | | :-------- | :---- | :-------- | | SectionId | String | The id of the section to navigate to. | | ContainerId | String | The id of the container the element is in. | | Duration | Integer | The time it will take the scroll to complete the distance in ms.| | Offset | Integer | The amount to offset the scrolling to ( 10 means it will scroll 10 pixels higher.)|

ScrollSection

| Prop | Type | What does it do | | :-------- | :---- | :-------- | | Children | React component(s) | The children you want to be scrollable. | SectionId | String | The section id you will use to scroll to.

Examples

Basic usage of the container and sections

Using the containerId ensures you call a unique element in that specific container.

<ScrollContainer id="newContainer">
     <ScrollSection id="section1">
        <somecomponent />
     </ScrollSection>
     ....
</ScrollContainer>

Scroll to a section

<div onClick={() => ScrollTo('targetId','newContainer', 10, 500)}>
	Click me to navigate to section #1
</div>