![]() ![]() ![]() This is an issue given how there is a huge market penetration of Webkit mobile browsers. Hovering styles don't work as intended on mobile in most circumstances. ![]() This is assuming you are using a horizontal scroll, as the example code does. This is an edge case for when the browser width is larger than the horizontally scrolling content width. Your outer container will probably need a max-width that will match whatever your inner container's width is, otherwise you may see some oddity on extremely large displays.The question was specifically about Webkit and not anything else, so this answer is only in regards to Webkit. It should be obvious, but this is a Webkit solution.Width: 10000px /* Set to see the scrolling effect */ Height: inherit /* Inherits from outer container */ Overflow-x: scroll /* Horizontal-only scrolling */īackground-color: white /* Initial color of the scrollbar */īackground-color: red /* Hover state color of the scrollbar */īackground-color: white /* Masks outer container */ Here's the code to put it all together for a page with a horizontally scrolling component.īackground-color: inherit /* Inherits from outer container */ If that's not a worry, this will work for you. This can be a bit of a hassle if your background isn't a solid color, since the inner container will most likely need to match. The transition property will be applied to the background-color of the outer container.Ī major disadvantage here is that you have to do some masking.The scrollbar's background-color will inherit the outer container's.The inner container will match the height of the outer container and will have a background-color that masks the outer container.This property will match the color we want to transition on for the scrollbar. The outer container will have a background-color property.Then we want to create an inner container. We need to create an outer container that will scroll.Long answer: There are means to achieve a similar effect entirely in CSS. Short answer: No, it's not possible to use transition on a ::-webkit-scrollbar ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |