Edit Question - KnowledgeHub

Title Body

I'm trying to style scrollbars which will appear on DIV's in a design I'm working on. It's webkit only so figured I could get quite a way with just CSS rather than plugins. Unfortunately I've hit a major issue. The design requires the scrollbars to overlap the content with a transparent effect, much like OS X Mountain Lion / iOS. When custom styles are applied to the scrollbar however it resizes the content to fit the scrollbar in. I've managed to size the content so that in the inspector it shows its under the scrollbar now, but I can't seem to make the scrollbar track transparent. I've tried applying these to both the ::-webkit-scrollbar and ::-webkit-scrollbar-track regions: background:transparent transparent background color with rgba a background image with transparency None seem to work. Before I give up and try a JavaScript custom scrollbar solution, thought I'd see if anyone else had an answer. * { list-style:none; margin:0; padding:0; } body { padding:20px; } #content { background:#333; height:400px; padding:1px; width:398px; } #content li { background:#666; height:100px; margin-bottom:10px; width:400px; } .scrollable-content { overflow-x:hidden; overflow-y:scroll; } .scrollable-content::-webkit-scrollbar { background:transparent; width:30px; } .scrollable-content::-webkit-scrollbar-track { background:transparent; } .scrollable-content::-webkit-scrollbar-thumb { background:#999; } <ol class="scrollable-content" id="content"> <li></li> <li></li> <li></li> <li></li> <li>&

Tags (comma-separated) Cancel