Custom Scrollbar Styles Not Updating Dynamically in Safari

I am currently working on a web application where I need a container/textarea with overflow on the y-axis. I've managed to achieve the desired scrollbar customization in Chrome by dynamically adding a class to the DOM when a scroll event occurs. This class modifies the "::-webkit-scrollbar" pseudo-element, allowing me to toggle between different styles as needed.

However, I'm facing an issue with Safari. Despite my custom styles being visible in the DOM when inspected, the scrollbar styles do not update dynamically as they do in Chrome.

Expected Behavior: The custom scroll bar should be hidden when the user is not scrolling. When the user begins to scroll, the scroll bar should become visible.

Custom Scrollbar Styles Not Updating Dynamically in Safari
 
 
Q