You using code of Mirosoft Edit. But as scrollbar you using a different one.
The problem is, that your implementation isn't so smooth.
For example. A three letter high area.
With your implementation, you have three possibilities to scroll about it
█ => │ => │
│ => █ => │
│ => │ => █
With the choosen characters in Microsoft Edit there existing more steps between it.
The scrollbar itself is defined with the background color. And then existing the light block. In this example created with half blocks:
█ => ▄ => => =>
=> ▀ => █ => ▄ =>
=> => => ▀ => █
In a terminal (not in the browser) the two steps with halfed blocks looking like one block, but between the lines. I think, that is how the Microsoft Edit scrollbars are working.
And that is also not, what Microsoft Edit do. Because there are more steps between it.
Here are all steps, but only two lines, instead of three:
█ ▇ ▆ ▅ ▄ ▃ ▂ ▁
▔ 🮂 🮃 ▀ 🮄 🮅 🮆 █
Again: Copy it in a console/terminal, then you don't see it so broken.
You using code of Mirosoft Edit. But as scrollbar you using a different one.
The problem is, that your implementation isn't so smooth.
For example. A three letter high area.
With your implementation, you have three possibilities to scroll about it
With the choosen characters in Microsoft Edit there existing more steps between it.
The scrollbar itself is defined with the background color. And then existing the light block. In this example created with half blocks:
In a terminal (not in the browser) the two steps with halfed blocks looking like one block, but between the lines. I think, that is how the Microsoft Edit scrollbars are working.
And that is also not, what Microsoft Edit do. Because there are more steps between it.
Here are all steps, but only two lines, instead of three:
Again: Copy it in a console/terminal, then you don't see it so broken.