How to customize scroll bar in Angular application

Question

I want to customize scroll bar for the whole application. Which means I want to change the default browser look on scroll bar. In my styles.scss file I have tried but saw no difference in scroll bar:

::-webkit-scrollbar {
   //changes
}

html::-webkit-scrollbar {
  //changes
}

body::-webkit-scrollbar {
  //changes
}

::ng-deep ::-webkit-scrollbar {
  //changes
}

app.component.html:

<app-shell>
   <main>
       <router-outlet></router-outlet>
   </main>
</app-shell>

shell.component.html:

<nav>
<!-- navbar here -->
</nav>

<main>
    <ng-content></ng-content>
</main>

Is there something that I misunderstood about scrollbars? How to change the browser default scroll bar around the application?

UPDATE: Even if there is nothing to scroll on the page, there is white scrollbar on the right side.

Agustin L. Lacuara · Accepted Answer · 2021-10-26 18:48:46Z

4

I have used many times these code lines:

::-webkit-scrollbar {
   width: 0; /* Remove scrollbar space */
   background: transparent; /* Optional: just make scrollbar invisible */
}

::-webkit-scrollbar-thumb {
   background: #FF0000;
}

They worked for me in many situations.

Try using !important or specifying the div in which the scrollbar is rendering (I needed this is some cases)

.your-div-selector::-webkit-scrollbar {
   width: 0; /* Remove scrollbar space */
   background: transparent; /* Optional: just make scrollbar invisible */
}

.your-div-selector::-webkit-scrollbar-thumb {
   background: #FF0000;
}

answered Oct 26, 2021 at 18:48

Agustin L. Lacuara

3391 gold badge3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AyseAsude Over a year ago

I tried adding !important but it didn't change anything. Which div should I specify in order to apply changes to the whole app?

Agustin L. Lacuara Over a year ago

Try something like: div::-webkite-scrollbar { ... } this allows to add that style to every div. But I think you may need to do it for each scrollable div with a particular selector

AyseAsude Over a year ago

I tried div.class-name::webkit-scrollbar { ... } but it did not make any difference. I tested the div.class-name selector so the selector is correct but it just does not affect scrollbar.

Collectives™ on Stack Overflow

How to customize scroll bar in Angular application

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related