react-scroll-container-pro

Custom scrollbars for your React components

Install

$ npm i --save @zippytech/react-scroll-container-pro

Usage

Just import the ScrollContainer code and styles into your app and you're ready to go!

import ScrollContainer from '@zippytech/react-scroll-container-pro'
import '@zippytech/react-scroll-container-pro/index.css'

<ScrollContainer>
  SCROLLABLE CONTENT HERE ...
  Lorem cupidatat ut elit magna culpa cupidatat velit id.
</ScrollContainer>

Props

• alwaysShowTrack: Boolean - defaults to false. If true, the scroll track is always shown when the scrollthumb is visible.
• autoHide: Boolean - defaults to true. If true, scrollbars are hidden when not scrolling.
• dragToScroll: Boolean - defaults to true. If false, the scrollbars cannot be dragged with the mouse cursor.
• emptyScrollOffset: Number - defaults to 100. The offset to use to hide the native scrollbars. In some special cases, you might want to set it to 0.
• hideDelay: Number - defaults to 400 (in ms). The delay to wait in order to hide the scrollbars
• hideTransitionDuration: String - defaults to 300ms. The duration of the transition effect used when hiding the scrollbars.
• inlineBlock: Boolean - defaults to false. If true, the scroll container will render a div with display: inline-block.
• scrollStopDelay: Number - defaults to 100. The duration to wait after the last scroll event in order to trigger onScrollStop.
• scrollThumbMargin: Number - defaults to 2
• showDelay: Number - defaults to 100 (in ms). The delay to wait in order to show the scrollbars
• showTransitionDuration: String - defaults to 100ms. The duration of the transition effect used when showing the scrollbars.
• showTrackOnDrag: Boolean - defaults to false. If true, the scrollbar track will always be visible when the scroll thumb is dragged, even if the mouse cursor is not over it.
• rafOnScroll: Boolean - defaults to true. If true, will do the onScroll logic on raf, otherwise immediately.
• scrollbars: Boolean|Object({vertical, horizontal}) - By default, both scrollbars are displayed when needed. You can use this prop in order to hide one or both scrollbars (scrolling can still happen). If scrollbars === false, the scrollbars are no longer displayed. If an object, it can have horizontal and/or vertical keys. If one of them is === false, that respective scrollbar is no longer displayed
• tabName: String - a tagName to use instead of the default div
• scrollThumbMargin: Number - defaults to 2. For the vertical scrollbar, this is the distance between the right edge of the scrollbar margin to the right edge of the scroll container. For the horizontal scrollbar, this is the distance between the bottom edge of the scrollbar margin to the bottom edge of the scroll container.
• scrollThumbStartEndRespectMargin: Boolean - defaults to false. If true, the scrollThumbMargin will also be applied to the start/end of the scrollthumb. So, for the vertical scrollbar, scrollThumbMargin will also be applied to top/bottom, and for the horizontal scrollbar, scrollThumbMargin will also be applied to left/right edges.
• scrollThumbWidth: Number - defaults to 7 - the dimension of the scroll thumb
• scrollThumbOverWidth: Number - defaults to 10 - the dimension of the scroll thumb on mouse over (is also the dimension of the scroll track)
• scrollThumbRadius: Number - defaults to scrollThumbWidth
• scrollThumbStyle: Object
• scrollerStyle: Object
• viewClassName: String
• viewStyle: Object
• avoidRepaintOnScroll: Boolean - defaults to true. Will try to avoid repainting while scrolling, by adding backface-visibility: hidden;
• showScrollbarsOnOver: Boolean - defaults to true. Will show the scrollbars when the mouse gets over the scroll container and hide on mouseout.

Callback props

• onContainerScroll: Function({ scrollTop, scrollLeft }) - called when the scroll container has been scrolled, either vertically or horizontally
• onContainerScrollHorizontal: Function(scrollLeft) - only called when the scroll container has been scrolled horizontally
• onContainerScrollHorizontalMin: Function(scrollLeft) - only called when the scroll container has been scrolled horizontally, and it has reached the minimum scrollLeft value (ie, 0)
• onContainerScrollHorizontalMax: Function(scrollLeft) - only called when the scroll container has been scrolled horizontally, and it has reached the maximum scrollLeft value
• onContainerScrollVertical: Function(scrollTop) - only called when the scroll container has been scrolled vertically
• onContainerScrollVerticalMin: Function(scrollTop) - only called when the scroll container has been scrolled vertically, and it has reached the minimum scrollTop value (ie, 0)
• onContainerScrollVerticalMax: Function(scrollTop) - only called when the scroll container has been scrolled vertically, and it has reached the maximum scrollTop value
• onResize: Function({ width, height })
• onScrollbarsChange: Function({ horizontal: Boolean, vertical: Boolean }) - called when scrollbar visibility has changed - that is, a scrollbar has been shown or hidden
• onScrollbarStartDrag: Function(orientation: String("horizontal"|"vertical") - called when the user starts dragging one of the scrollbars with the mouse cursor
• onHorizontalScrollbarStartDrag: Function - equivalent to onScrollbarStartDrag("horizontal")
• onVerticalScrollbarStartDrag: Function - equivalent to onScrollbarStartDrag("vertical")
• onScrollbarStopDrag: Function(orientation: String("horizontal"|"vertical") - called when the user releases one of the scrollbars after dragging it with the mouse cursor
• onHorizontalScrollbarStopDrag: Function - equivalent to onScrollbarStopDrag("horizontal")
• onVerticalScrollbarStopDrag: Function - equivalent to onScrollbarStopDrag("vertical")
• onScrollStart: Function({ scrollTop, scrollLeft }) - called when scrolling starts (it can start either via scrollbar drag, mouse wheel or via keyboard interaction)
• onScrollStop: Function({ scrollTop, scrollLeft }) - called when scrolling stops - also see scrollStopDelay
• onViewResize: Function({ width, height }) - called when the scroll container content changes size

Public API methods

Named exports

• cleanProps(props, propTypes)
• propTypes - the propTypes of ScrollContainer

License

Commercial