Change scrollbar style if it is at the top-CodePudding

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?

CodePudding user response：

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

window.addEventListener("scroll", (event) => {
        let scroll = this.scrollY;
        if (scroll == 0) {
            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>