Custom Scroll Bar Formatting

UI Builder
1

I apologize if this is a newbie question but I’ve tried to create a Class - Extension for a custom scroll bar that works in the following W3schools demo as you can see here.

custom_scroll_bar_0
custom_scroll_bar_01682×1912 339 KB

And tried to copy and paste it into a new extension here…

custom_scroll_bar_1
custom_scroll_bar_11021×1189 83.1 KB

I assigned the class name to the correct block with the overflow set to auto…

custom_scroll_bar_2
custom_scroll_bar_23602×1303 195 KB

but in preview mode the scroll bars default to their standard colors.

custom_scroll_bar_3
custom_scroll_bar_33833×1543 283 KB

My API Key is 721AC780-A565-8D74-FF75-5158A2EB5500

Any advice would be appreciated!

2

Hello @William_Lee

It doesn’t work because you specify the scrollbar styles for all the inner components instead of the particular one, in order to apply these styles to the container you have to add & for each rule

.my-selector{
  &::webkit-....
 }

.custom_scroll_bar {
  
/* width */
&::-webkit-scrollbar {
  width: 20px;
}

/* Track */
&::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #6AC7BE; 
  border-radius: 10px;
}
 
/* Handle */
&::-webkit-scrollbar-thumb {
  background: #004A45; 
  border-radius: 10px;
}

/* Handle on hover */
&::-webkit-scrollbar-thumb:hover {
  background: #015C56; 
}

/* Track Piece */
&::-webkit-scrollbar-track-piece {
  background: #00786A; 
  border-radius: 10px;
}
  
}

Regards, Vlad

1 Like
3

that worked great thanks…