react-customized-scrollbar v1.2.3
React Custom Scrollbar
React component for implementing customizable scrollbars
Compatibility
Currently compatible with (latest versions) Chrome, Firefox, Edge, IE, (Safari, most likely works but not tested)DOES NOT work on IE due to (Fixed) Object.assign()
Installation and Dependencies
npm install --save react-customized-scrollbar
Usage
The following code is an example with available properties and possible values:
import ScrollWrapper from 'react-customized-scrollbar'
<ScrollWrapper
wrapperStyle={{width: "500px", height: "600px"}}
verticalScrollStyle={{borderRadius: "4px", backgroundColor: "black"}}
horizontalScrollStyle={{borderRadius: "4px", backgroundColor: "black"}}
verticalTrackStyle={{borderRadius: "4px", backgroundColor: "lightgrey"}}
horizontalTrackStyle={{borderRadius: "4px", backgroundColor: "lightgrey"}}
wrapperClassNames={"scroll-area-wrapper"}
verticalScrollClassNames={"scrollbar-vertical"}
horizontalScrollClassNames={"scrollbar-horizontal"}
verticalTrackClassNames={"track-vertical"}
horizontalTrackClassNames={"track-horizontal"}
minVerticalLength={10}
minHorizontalLength={10}
verticalThickness={"8px"}
horizontalThickness={"8px"}
stayVisible={false}
fadeInDuration={700}
fadeOutDuration={600}
autoFadeOut={300}
offsetScroll
autoUpdate
onLoadUpdate
autoHeight
>
/* Content goes here
<div>Hello World!</div>
*/
</ScrollWrapper>
Properties
Inline Style
wrapperStyle = { Object }
Inline style for scroll area container
verticalScrollStyle = { Object }
Inline style for vertical scrollbar
horizontalScrollStyle = { Object }
Inline style for horizontal scrollbar
verticalTrackStyle = { Object }
Inline style for vertical track
horizontalTrackStyle = { Object }
Inline style for horizontal track
Class Names
wrapperClassNames = { String }
CSS classes for scroll area container
verticalScrollClassNames = { String }
CSS classes for vertical scrollbar
horizontalScrollClassNames = { String }
CSS classes for horizontal scrollbar
verticalTrackClassNames = { String }
CSS classes for vertical track
horizontalTrackClassNames = { String }
CSS classes for horizontal track
Visibility
stayVisible = { Boolean }
Allow scrollbar (and track) to always stay visible or be able to hide and apply fade options. (Default: true)
fadeInDuration = { Number }
Applied only when stayVisible = {false}
Duration to completley fade in after a specified number of milliseconds. (Default: 0)
fadeOutDuration = { Number }
Applied only when stayVisible = {false}
Duration to comepletely fade out after a specified number of milliseconds. (Default: 0)
autoFadeOut = { Number }
Applied only when stayVisible = {false}
Scrollbar (and track) will automatically fade out after a specified number of milliseconds.
Other Properties
minVerticalLength = { Number }
Minimum vertical scrollbar length in pixels. Default: 20
minHorizontalLength = { Number }
Minimum horizontal scrollbar length in pixels. Default: 20
verticalThickness = { String }
Thickness of vertical scrollbar (e.g. '10px', '1em', '2rem', etc.)
If value is not given, be sure to define thickness (width
) with verticalScrollStyle
or verticalClassNames
Style will be overwritten if thickness already defined in verticalScrollStyle
horizontalThickness = { String }
Thickness of horizontal scrollbar (e.g. '10px', '1em', '2rem', etc.)
If value is not given, be sure to define thickness (height
) with horizontalScrollStyle
or horizontalClassNames
Style will be overwritten if thickness already defined in horizontalScrollStyle
offsetScroll = { Boolean }
If set to true
, scrollbars will sit outside the perimeter of your scroll area.
Otherwise, hug the edges but overlap the content. (Default: false)
autoUpdate = { Boolean }
Updates automatically using MutationObserver (Default: false)
Targets <ScrollWrapper>
and all its descendants
If set to false
, the scrollbars may not seem visually accurate. However, scrolling or hovering the scroll area should update the scrollbars accordingly.
onLoadUpdate = { Boolean }
Updates automatically when content such as images finish loading. (Default: false)
If set to false
, the scrollbars may not seem visually accurate. However, scrolling or hovering the scroll area should update the scrollbars accordingly.
Supports <frame>
, <iframe>
, <img>
, <input type="image">
autoHeight = {Boolean}
If set to true
, the height of container will be based on the heights of its content. Also, any height defined in wrapperStyle
and/or wrapperClassNames
will be overwritten. (Default: false)
Feedback/Questions
Any feedback or questions are greatly appreciated! :)
License
MIT
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago