Skip to main content
V
Velkumar19-Tanzanite
19-Tanzanite
June 1, 2026
Solved

Collection Widget - Scroll bar visible only on hover

  • June 1, 2026
  • 1 reply
  • 48 views

Hi,

 

How to change scroll bar properties of collection widget using custom css. Mainly I want it to be visible only on hover. 

 

Twx version : 9.7.1

Best answer by Velkumar

I just found a solution 

@supports (ptcs-style-unit: "PTCS-COLLECTION") {
  ::-webkit-scrollbar {
    width: 3px;
    height: 6px;            
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: transparent; 
    border-radius: 4px;
  }
  :host(:hover) ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.35);  
  }
  :host(:hover) ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);  
  }
}

 

1 reply

V
Velkumar19-TanzaniteAuthorAnswer
19-Tanzanite
June 1, 2026

I just found a solution 

@supports (ptcs-style-unit: "PTCS-COLLECTION") {
  ::-webkit-scrollbar {
    width: 3px;
    height: 6px;            
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: transparent; 
    border-radius: 4px;
  }
  :host(:hover) ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.35);  
  }
  :host(:hover) ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);  
  }
}

 

N
Nathaniel_SCommunity Manager
Community Manager
June 3, 2026

Hello ​@Velkumar 
Thank you for providing your solution. Please feel free to mark it as Best Answer for the community to readily see how you solved the problem.
Best regards, Nathaniel

Best regards, Nathaniel
Terms & ConditionsAccessibility statement