react-overlayscrollbars

React Overlay Scrollbars

---

This project is based on the overlayscrollbar project and is developed.

Demo

import ScrollBar from 'react-overlayscrollbars';
import 'react-overlayscrollbars/es/index.css';

<ScrollBar className="roy_scroll os-theme-dark"
        id="roy_id"
        style={{background:'red'}}
        overflow-behavior={{ x: 'hidden' }}
        scrollbars={{ autoHide: 'l' }} >
    // ....
</ScrollBar>

.roy_scroll{
    height: calc(100% - 0px);
    transition: width 0.3s ease-in-out 0s;
}

Download

npm

npm i -S react-overlayscrollbars

Options

Please read the much more detailed documentation.

option		type	default	description
className		string / null	"os-theme-dark"	The class name which shall be added to the host element.
resize		string	"none"	The resize behavior of the host element. This option works exactly like the CSS3 resize property.
sizeAutoCapable		boolean	true	Indicates whether the host element is capable of "auto" sizes such as: width: auto and height: auto.
clipAlways		boolean	true	Indicates whether the content shall be clipped always.
normalizeRTL		boolean	true	Indicates whether RTL scrolling shall be normalized.
paddingAbsolute		boolean	false	Indicates whether the padding for the content shall be absolute.
autoUpdate		boolean / null	null	Indicates whether the plugin instance shall be updated continuously within a update loop.
autoUpdateInterval		number	33	The interval in milliseconds in which a auto update shall be performed for this instance.
nativeScrollbarsOverlaid : {
	showNativeScrollbars	boolean	false	Indicates whether the native overlaid scrollbars shall be visible.
	initialize	boolean	true	Indicates whether the plugin shall be initialized even if the native scrollbars are overlaid. If you initialize the plugin on the body element, I recommend to set this option to false.
}
overflowBehavior : {
	x	string	"scroll"	The overflow behavior for the x (horizontal) axis.
	y	string	"scroll"	The overflow behavior for the y (vertical) axis.
}
scrollbars : {
	visibility	string	"auto"	The basic visibility of the scrollbars.
	autoHide	string	"never"	The possibility to hide visible scrollbars automatically after a certain action.
	autoHideDelay	number	800	The delay in milliseconds before the scrollbars gets hidden automatically.
	dragScrolling	boolean	true	Defines whether the scrollbar-handle supports drag scrolling.
	clickScrolling	boolean	false	Defines whether the scrollbar-track supports click scrolling.
	touchSupport	boolean	true	Indicates whether the scrollbar reacts to touch events.
	snapHandle	boolean	false	Indicates whether the scrollbar handle-offset shall be snapped.
}
textarea : {
	dynWidth	boolean	false	Indiactes whether the textarea width will be dynamic (content dependent).
	dynHeight	boolean	false	Indiactes whether the textarea height will be dynamic (content dependent).
	inheritedAttrs	string / array / null	["style", "class"]	During initialization: Attributes which the generated host-element shall inherit from from the target textarea-element. During destruction: Attributes which the target textarea-element shall inherit from from the generated host-element.
}
callbacks : {
	onInitialized	function / null	null	Gets fired after the plugin was initialized. It takes no arguments.
	onInitializationWithdrawn	function / null	null	Gets fired after the initialization of the plugin was aborted due to the option nativeScrollbarsOverlaid : { initialize : false }. It takes no arguments.
	onDestroyed	function / null	null	Gets fired after the plugin was destryoed. It takes no arguments.
	onScrollStart	function / null	null	Gets fired after the user starts scrolling. It takes one argument.
	onScroll	function / null	null	Gets fired after every scroll. It takes one argument.
	onScrollStop	function / null	null	Gets fired after the user stops scrolling. It takes one argument.
	onOverflowChanged	function / null	null	Gets fired after the overflow has changed. It takes one argument.
	onOverflowAmountChanged	function / null	null	Gets fired after the overflow amount has changed. It takes one argument.
	onDirectionChanged	function / null	null	Gets fired after the direction has changed. It takes one argument.
	onContentSizeChanged	function / null	null	Gets fired after the content size has changed. It takes one argument.
	onHostSizeChanged	function / null	null	Gets fired after the host size or host padding has changed. It takes one argument.
	onUpdated	function / null	null	Gets fired after the host size has changed. It takes one argument.
}

License

MIT