How to fix perfect scrollbar scroll to top năm 2024
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. Show containerRefReturn 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; componentThe container component type. Default to "div". Only string is allowed. classNameThe className added to container. styleThe style added to container. onScrollYInvoked when the y-axis is scrolled in either direction. onScrollXInvoked when the x-axis is scrolled in either direction. onScrollUpInvoked when scrolling upwards. onScrollDownInvoked when scrolling downwards. onScrollLeftInvoked when scrolling to the left. onScrollRightInvoked when scrolling to the right. onYReachStartInvoked when scrolling reaches the start of the y-axis. onYReachEndInvoked when scrolling reaches the end of the y-axis (useful for infinite scroll). onXReachStartInvoked when scrolling reaches the start of the x-axis. onXReachEndInvoked 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 import PerfectScrollbar from 'react-perfect-scrollbar' 0 from it: onScrollY={container => console.log( ... SCROLLBAR CONTENT HERE ... onSyncInvoked 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.HTMLAttributesAny attributes defined in can be used for the component. MethodsThe following method can be called by the component ref: updateScrollUpdate 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 ( ref = {(ref) => { this._scrollBarRef = ref; }} > ... onUpdateSize = {() => { this._scrollBarRef.updateScroll(); }} /> ... ); } } class ChildComponent extends Component { handleClick = () => { this.setState({ show: !this.state.show, }, () => this.props.onUpdateSize()); } render () { return (
{ this.state.show ? }
) } } ExampleA 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 . |