Perfect scroll bar calculate the thumb height React

Code Snippets 4 U
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);
        }))
    };

Leave a Reply

Your email address will not be published. Required fields are marked *

twenty seven − twenty =