👀 Views: 415 💬 Answers: 1 📅 Created: 2025-06-11

css safari react JavaScript

I have been trying to customize the scrollbar for a div element using the following CSS: ```css .my-scrollable-div { overflow-y: scroll; width: 300px; height: 400px; } .my-scrollable-div::-webkit-scrollbar { width: 12px; } .my-scrollable-div::-webkit-scrollbar-track { background: #f1f1f1; } .my-scrollable-div::-webkit-scrollbar-thumb { background: #888; border-radius: 6px; } .my-scrollable-div::-webkit-scrollbar-thumb:hover { background: #555; } ``` This works perfectly in Chrome and Firefox, but when I test it in Safari (specifically Safari 16.0), the custom styles for the scrollbar simply do not appear. I just see the default scrollbar instead. I checked the browser compatibility and it seems that `::-webkit-scrollbar` should be supported, so I'm confused why it's not working. I've also tried adding a `-webkit-overflow-scrolling: touch;` property, but that didn't help. The content is dynamically loaded via React, and I am using styled-components to manage my styles. Here’s how I’ve implemented it in the component: ```javascript const ScrollableDiv = styled.div` overflow-y: scroll; width: 300px; height: 400px; &::-webkit-scrollbar { width: 12px; } &::-webkit-scrollbar-track { background: #f1f1f1; } &::-webkit-scrollbar-thumb { background: #888; border-radius: 6px; } &::-webkit-scrollbar-thumb:hover { background: #555; } `; const MyComponent = () => { return <ScrollableDiv>{/* dynamic content */}</ScrollableDiv>; }; ``` I’ve consulted the documentation and various forums, but I haven't found any solution that addresses this scenario specifically in Safari. Has anyone faced a similar scenario, and if so, how did you resolve it? Any help would be greatly appreciated!