Overflow-y: Scroll not showing scrollbar in Chrome
Solution 1
According to CSS - Overflow: Scroll; - Always show vertical scroll bar?: OSx Lion hides scrollbars while not in use to make it seem more "slick", but at the same time the issue you addressed comes up: people sometimes cannot see whether a div has a scroll feature or not.
CSS fix:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Solution 2
I am seeing scroll bar well. If you are using Mac, you may want to make sure that scrollbars are always shown
Solution 3
Add this to your css
.list::-webkit-scrollbar {
-webkit-appearance: scrollbartrack-vertical;
}
or
.list::-webkit-scrollbar {
-webkit-appearance: scrollbarthumb-vertical;
}
Solution 4
I am using Windows 8 and Google Chrome version is 48.0.2564.97. And its working perfect. See in image highlighted area.
Admin
Updated on July 20, 2022Comments
-
Admin almost 2 years
I am generating a list of organisations of the left hand side of this page: http://www.ihhub.org/member-map/
This list is generated through appending
<span>
tags that are linked to the corresponding map.My issue is - the scroll bar does not appear in CHROME but does appear in Firefox and Safari.
Any solutions?
UPDATE:
This issue appears to be isolated to MAC OS.
SOLUTION:
::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); }
-
Admin about 8 yearsHi Timo - unfortunately the scroll bar does not appear on the list of organisations when I changed the mac settings. Furthermore - I believe - that this is an issue on Chrome for Mac and Windows.
-
Admin about 8 yearsI am glad to see this is working on Chrome - is this on Windows. If so the issue is still on Mac. I have changed to overflow:auto as per a few comments. Please advise.
-
Admin about 8 yearsGreat Timo - looks like it is just Mac that this is not appearing on automatically. I am still seeking for this solution. I have changed overflow-y:scroll to overflow:auto and no change.
-
Admin about 8 yearsHi Timo - many thanks for pointing this out. Unfortunately it was not what I was looking for however i did come across the solution thanks to your ::-webkit-scrollbar selector.
-
Admin about 8 yearsI have shared above @Timo and I have added to the website link too. Many thanks for your input.
-
Timo about 8 yearsThanks. No problem :)
-
Yarin over 5 yearsThis is almost a great solution, problem is it adds space for the scrollbar gutter that wouldn't otherwise be there. I wish there was a way to show it without taking up extra space.
-
Akansh about 4 years@Timo It's not working now and coming as Invalid property value.