This prop previously was called "option", but has since been renamed. If you provide "option" as a prop, it will be used unless "options" is also passed.
containerRef
Return the container ref: [ref] => void; If you want to scroll to somewhere, just update scrollTop/scrollLeft by the ref:
this._scrollRef.scrollTop = 0;
this._scrollRef.scrollLeft = 0;
component
The container component type. Default to "div". Only string is allowed.
className
The className added to container.
style
The style added to container.
onScrollY
Invoked when the y-axis is scrolled in either direction.
onScrollX
Invoked when the x-axis is scrolled in either direction.
onScrollUp
Invoked when scrolling upwards.
onScrollDown
Invoked when scrolling downwards.
onScrollLeft
Invoked when scrolling to the left.
onScrollRight
Invoked when scrolling to the right.
onYReachStart
Invoked when scrolling reaches the start of the y-axis.
onYReachEnd
Invoked when scrolling reaches the end of the y-axis [useful for infinite scroll].
onXReachStart
Invoked when scrolling reaches the start of the x-axis.
onXReachEnd
Invoked when scrolling reaches the end of the x-axis.
All the callback 'onXXXX' can accept a parameter: the ref to the scrollbar container. You can get the current scrollTop and
import PerfectScrollbar from 'react-perfect-scrollbar'
0 from it:
console.log[scrolled to: ${container.scrollTop}.]}>
... SCROLLBAR CONTENT HERE ...
onSync
Invoked when
import PerfectScrollbar from 'react-perfect-scrollbar'
1 comp needs to sync the scrollbar container by invoking
import PerfectScrollbar from 'react-perfect-scrollbar'
2[Basically, it is invoked in CDU lifecycle] and receive the internal
import PerfectScrollbar from 'react-perfect-scrollbar'
3 instance
import PerfectScrollbar from 'react-perfect-scrollbar'
4 as parameter.
It is useful when you want to customize the sync logic in some scenarios, eg: debounce the invocation of
import PerfectScrollbar from 'react-perfect-scrollbar'
2.
For more detail, please refer to issue
87 and the example directory.
React.HTMLAttributes
Any attributes defined in can be used for the component.
Methods
The following method can be called by the component ref:
updateScroll
Update the scrollbar[e.g. recalculate the size] manually. In the following case, the scrollbar will not update automatically, which cause the scrollbar size incorrect.
class Container extends Component {
...
render[] {
return [
...
...
];
}
}
class ChildComponent extends Component {
handleClick = [] => {
this.setState[{
show: !this.state.show,
}];
}
render [] {
return [
{ this.state.show ? }
]
}
}
You need to call
import PerfectScrollbar from 'react-perfect-scrollbar'
6 to get the correct scrollbar size:
class Container extends Component {
...
render[] {
return [
{ this._scrollBarRef = ref; }}
>
...
{ this._scrollBarRef.updateScroll[]; }}
/>
...
];
}
}
class ChildComponent extends Component {
handleClick = [] => {
this.setState[{
show: !this.state.show,
}, [] => this.props.onUpdateSize[]];
}
render [] {
return [
{ this.state.show ? }
]
}
}
Example
A working example can be found in the
import PerfectScrollbar from 'react-perfect-scrollbar'
7 directory. Please run
import PerfectScrollbar from 'react-perfect-scrollbar'
8 in browser. [Must run
import PerfectScrollbar from 'react-perfect-scrollbar'
9 for the first time]
How to get scroll top?
The scrollTop[] method sets or returns the vertical scrollbar position for the selected elements. Tip: When the scrollbar is on the top, the position is 0. When used to return the position: This method returns the vertical position of the scrollbar for the FIRST matched element.
How to use a perfect scrollbar?
Perfect Scrollbar.
the container must have an overflow: hidden css style..
the scrollbar's position must be absolute ..
the scrollbar-x must have bottom or top , and the scrollbar-y must have right or left ..
How to set scrollTo top in JavaScript?
Setting the position parameter to 0 scrolls the page to the top. Syntax: $[window]. scrollTop[position];
What is a scrollTop?
An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content. When an element's content does not generate a vertical scrollbar, then its scrollTop value is 0 .