Change scrollbar style if it is at the top

user_19837112 0
Viewed 53

I know it is possible to change a scrollbar using just CSS, but I wanted to remove the border radius of the scrollbar if it is at the top of its track. Is this possible?

css html
1 Answers

1.setting up .myCss class with pseudo webkit-scroll in the CSS. 2.adding event Listener on the window object with event of scroll which gives me the scrollY position every time i scroll and saving it in scroll. 3.if scroll is equal to 0 add myCss Class. and if its not I am removing it. additions: setting condition to change when it hits the bottom.

firefox:window.scrollMaxY

chrome:document.documentElement.scrollHeight - document.documentElement.clientHeight

        console.log(window.scrollMaxY)  //FireFox (Max Scroll Height)
        console.log(window.scrollY)   //(current Scroll Height)
        console.log(document.documentElement.scrollHeight - document.documentElement.clientHeight)          //Chrome (Max Scroll Height)
window.addEventListener("scroll", (event) => {
        let scroll = this.scrollY;
        if (scroll == 0) {
            document.body.classList.add("myCss")
        }
        else if(scroll==(document.documentElement.scrollHeight - document.documentElement.clientHeight)) {
            document.body.classList.add("myCss")
        }
        else{
        document.body.classList.remove("myCss")
        }
    });
p {
        background-color: aqua;
        width: 100vw;
        height: 300vh
    }


    .myCss::-webkit-scrollbar {
        background-color: gray;
        width: 10px;

    }

    .myCss::-webkit-scrollbar-thumb {
        background-color: white;
        border-radius: 5px;
    }
<p></p>

user_193658210
Related