Why my scrollbar is at different position in scroll track

I'm using Vue to write a page, and customized my own scrollbar style, but at the same time occurs an odd problem.

Two scrollbars are at different position between two instance with same same comonent. One is at center, and the other is align to right.(I hope both at center.) How should I do?

center one right one

&::-webkit-scrollbar {
    width: 7px;
}

/* Track */
&::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Handle */
&::-webkit-scrollbar-thumb {
    background: #2ecb9e;
    border: 0.5px solid transparent;
    border-radius: 9px;
    background-clip: content-box;
}

/* Handle on hover */
&::-webkit-scrollbar-thumb:hover {
    background: #555;
}