How to change the scroll bar color


Since a new version of Hype, the scroll bar is now grey.

I was using a black background for my website, how can I do to get it in black again ?

It’s like I have a grey border all around my text, not pretty…



The new version(s) of Hype wouldn’t have changed the behaviour of scroll bars.

This sounds like you have a border set in the “Element” inspector. By default, all Rectangle and Ellipse elements have borders. Text elements don’t though.

Could you share what you have so we can see what’s going on?

When I create a text box on a new document, and I select a scrolling option, I see a grey or white border horizontaly, and verticaly.

A few month ago I had no problem with this scrolling text box, the reason why I think something had changed…

No border set on text

If you switch your ‘Scroll bar behavior’ to be ‘Automatically based on mouse or trackpad’ in system preferences, then you will only see scroll bars if you have a mouse connected or you are currently scrolling. This is the default. Could it be you plugged in a mouse?

You can also specifically target element with CSS to adjust the ‘overflow’ property:

Yes I have an external mouse since a few month,

So I checked always, and right now I have got a vertical border only… iven if I disconnect the mouse.

Before it was like transparent, I could only see a button to move up or down in a vertical rectangle.

I didn’t have to change something on CSS.


This morning I tried to add css in the head of my document, but nothing change.

My text has got the id “calendar” so I wrote

.calendar::-webkit-scrollbar-track-piece {						
/* Background */
	background: transparent none;

Also I tried with !important at the end, nothing happen, is there something I forgot ?


Share your Hype document, strip it down to the basic things if needed, so others here can see what’s going (wr)on(g). (28.4 KB)

Here you are, I have removed css style I am trying to apply.

But as you will see by default it’s not nice at all…


After some research, I get this document working.

But how can I reverse the slider position on the left ? (29.5 KB)

Try this which works for my tests


    /* Let's get this party started */
    .calendar::-webkit-scrollbar {
        width: 12px;
    /* Track */
    .flexcroll::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
        -webkit-border-radius: 10px;
        border-radius: 10px;
    /* Handle */
    .calendar::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: grey; 
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 

From :

Thank you
Do you know if it is possible to move the slider on the left ?

I am pretty sure something have changed,

I have got the same problem on embeded video,

Please take a look… The video was inside an iFrame

It works

To remove the scrollbar inside the iframe I put a black rectangle for the moment…

Don’t know why something has changed

Have a nice day folks