Custom Scrollbar inside md-container

[SPyofgame]

Context

I want to make a custom scrollbar like this:

But if I move the cat, it will leave a bad gap here

I want to fill that part will color depending on the palette I am selecting (slate/light/custom). But it seems hard, so I decided to put the cat into the default scrollbar inside. Replace the default one with the cat like this

The problem is it somehow did not allow the webkit

I continue to try using gradient of colors

But it will depend on the size if we zoom

So I also tried to make a custom overflow with max-height like this

but for some reason, I cant override the thumb or the track of it anymore :/

so I ended up having this....

File CSS

body::-webkit-scrollbar { 
  width: 0;
  height: 0;
  display: none;
  /* width: 30px; */
}

body::-webkit-scrollbar-track {   
  background: transparent; 
}

body::-webkit-scrollbar-thumb { 
  width: 68px;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/cat.gif"),
    linear-gradient(
      90deg,
      transparent,
      magenta,
      red,
      yellow,
      limegreen,
      turquoise,
      blue,
      magenta,
      transparent
    );
  background-position: center bottom, center -40px;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, contain;
}
    
.md-main {
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  max-height: 720px;
}

.md-main::-webkit-scrollbar-track {   
  background: transparent; 
}

.md-main::-webkit-scrollbar-thumb { 
  width: 68px;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/cat.gif"),
    linear-gradient(
      90deg,
      transparent,
      magenta,
      red,
      yellow,
      limegreen,
      turquoise,
      blue,
      magenta,
      transparent
    );
  background-position: center bottom, center -40px;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, contain;
}

[facelessuser]

Unfortunately, I don't have time to provide people with custom solutions for things. I mainly spend my time maintaining the project and answering questions related to using the project.

[SPyofgame]

Do you have any recommended source of documentation for this issue? 😞 I have tried to search related stuff on google but found nothing more than making a cat of the outer scope (not inner).

But for this part, can I somehow extend the header ?

[SPyofgame]

May I ask for your help @squidfunk ?

[squidfunk]

Same as @facelessuser, I just don't have the time to help you with customizations. 20k+ users are waiting for bugs to be fixed and new features to be added, so I'm afraid I can't put time aside to help you with something that you need personally. I've already mentioned that in another customization request you did, so I would kindly ask you to stop doing that. Thank you!

[SPyofgame]

Oh, ok :3 When my website went released to Alpha one day that I have it well implemented, I will then share the ideas with other users so they don't have to search a bunch of stuff on google 😆