componentDidUpdate() {
// hide scrollbar when content height is less than view
// and find the min height of scrollbar at the start
if (this.scrollRef) { // check if element is mounted
this.wait(2).then(() => { // wait 2ms to allow content of 'scrollRef' to update
this.wait(10).then(() => { // wait 10ms to allow unit content to render
let childHavingContent = this.scrollRef.children[2].children[2]; // to find the content's height
const childHavingBar = this.scrollRef.children[1].children[0]; // to set the height of bar
if (!childHavingContent) { // if height is smaller then view then child will be 'undefined'
this.scrollRef.classList.add("hide-perfect-scrollbar");
} else {
this.scrollRef.classList.remove("hide-perfect-scrollbar");
// calculate the size of sidebar thumb
const heightOfBar = parseInt((Math.pow(this.scrollRef.clientHeight, 2)/ this.scrollRef.scrollHeight).toFixed(0), 10);
if(childHavingBar && heightOfBar && this.state.minScrollbarLength !== heightOfBar){
// update the height of sidebar thumb
this.setState({minScrollbarLength: heightOfBar});
}
}
});
});
}
}
// wait for specific amount of time (equivalent to sleep)
wait = (time: number) => {
return new Promise((resolve => {
setTimeout(resolve, time);
}))
};
Perfect scroll bar calculate the thumb height React
