React-simple-scroll-container NPM

react-simple-scroll-container

A simple scrolling container for react.

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.

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.)

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.

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

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

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

6 years ago

6 years ago

6 years ago

6 years ago