Class StringScrollbar

src/Scrollbar/StringScrollbar.ts:1–111

export class StringScrollbar {
    private scrollbar: any;
    private thumb: any;
    private scrollTimeout: any;

    private isScrollbarWillShow = true

    constructor() {
        this.createScrollbar();
        this.updateThumb();
        this.addCustomStyles()
    }

    private addCustomStyles() {
        const style = document.createElement('style');
        style.textContent = `
            ::-webkit-scrollbar {
                width: 0px;
            }
            body {
                -ms-overflow-style: none;  /* IE and Edge */
                scrollbar-width: none;  /* Firefox */
            }
        `;
        document.head.appendChild(style);
    }

    private createScrollbar() {
        this.scrollbar = document.createElement('div');
        this.scrollbar.classList.add('scrollbar')
        this.thumb = document.createElement('div');
        this.thumb.classList.add('thumb')

        this.scrollbar.appendChild(this.thumb);
        document.body.appendChild(this.scrollbar);

        this.addDragFunctionality();
        this.addScrollListener();
    }

    public resize(){
        const contentHeight = document.documentElement.scrollHeight;
        const visibleHeight = window.innerHeight;
        const thumbHeight = visibleHeight / contentHeight * visibleHeight;
        this.thumb.style.setProperty('--height', thumbHeight + 'px');

        if (contentHeight <= visibleHeight) {
            this.scrollbar.classList.add('-hide')
        } else {
            this.scrollbar.classList.remove('-hide')
        }
    }

    private updateThumb() {
        const contentHeight = document.documentElement.scrollHeight;
        const visibleHeight = window.innerHeight;
        this.thumb.style.setProperty('--position', `${(document.documentElement.scrollTop / contentHeight * visibleHeight) + 'px'}`)
        //this.thumb.style.transform = `translateY(${(document.documentElement.scrollTop / contentHeight * visibleHeight) + 'px'})`;
    }