How to style the scrollbar inside a ion-modal in Ionic 6?


ion-modal has a default scrollbar that will appear if the content overflows. I want to style that scrollbar.

I am able to style scrollbars in the app with ::-webkit-scrollbar, ::-webkit-scrollbar-track and ::-webkit-scrollbar-thumb but it doesn’t seem to work inside a modal. I’ve tried applying these elements to several components inside the modal like ion-content::-webkit-scrollbar but it doesn’t work.


Below is the general approach you can take to style a scroll bar inside an ion-modal in Ionic 6.

  1. Wrap your ion-modal content inside


tag like given below

    //modal content goes here
  1. Then in global css file add below css for scrollbar

     ion-content {
         --offset-bottom: auto !important;
         --overflow: auto;
         background: var(--ion-toolbar-background, var(--ion-background-color, 
                      #000000)) !important;
         overflow: auto;
     &::-webkit-scrollbar {
         width: 5px;
         height: 5px;
     &::-webkit-scrollbar-track {
         background: rgb(0, 0, 0);
     &::-webkit-scrollbar-track:hover {
         background: #35d703;
     &::-webkit-scrollbar-thumb {
         background: rgb(75, 75, 75);
      &::-webkit-scrollbar-thumb:hover {
          background: #94173a
      .inner-scroll {
          scrollbar-width: thin;

Your scroll will look like below in ion-modal

enter image description here

Answered By – Ravindra Pawar

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published