How to style the scrollbar

[siminn-bjorks]

Hi, i'm having trouble trying to style the scrollbar. I have tried styling it with webkit in the style props but it does not work. Any ideas on how to do this?

Thank you.

[Smitgamit]

You can add in CSS file .., work for me And you can change CSS style as per your requirements

.infinite-scroll-component { background-color: #ffff; scrollbar-color: rgba(0, 0, 0, 0.2) #ffff; scrollbar-face-color:rgba(0, 0, 0, 0.2); } .infinite-scroll-component::-webkit-scrollbar { width: 7px!important; } /* Track / .infinite-scroll-component::-webkit-scrollbar-track { background: rgb(255, 255, 255); } / Handle / .infinite-scroll-component::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 10px; } / Handle on hover */ .infinite-scroll-component::-webkit-scrollbar-thumb:hover { background:rgba(0, 0, 0, 0.2); }

[Smitgamit]

Hi, i'm having trouble trying to style the scrollbar. I have tried styling it with webkit in the style props but it does not work. Any ideas on how to do this?

Thank you.

Please follow the upper snippet

[siminn-bjorks]

Thank you! it works :)

[roee030]

I am using SCSS style files and I am trying to style the scroll bar too but, with no success... JS:

  <div id="scrollableFeed" className={clsx(styles.root)}>
      <InfiniteScroll
        // code....
   </InfiniteScroll>
    </div>

SCSS:

.infinite-scroll-component {
background-color: #ffff;
scrollbar-color: rgba(0, 0, 0, 0.2) #ffff;
scrollbar-face-color:rgba(0, 0, 0, 0.2);
}
.infinite-scroll-component::-webkit-scrollbar {
width: 7px!important;
}

Thank you.