Overflow-y: scroll that doesn't show scrollbar in Chrome

Question

I am creating a list of organizations on the left side of this page: http://www.ihhub.org/member-map/

This list is created by adding the <span> tags associated with the corresponding map.

My problem is the scrollbar does not appear in CHROME, but appears in Firefox and Safari.

Any solutions?

UPDATE:

This issue seems to be isolated from MAC OS.

DECISION:

 ::-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); } 

Answer 1

According to CSS - overflow: scrolling; - Always show vertical scrollbar? : OSX Lion hides scrollbars until it is used to make it smoother, but at the same time, the problem you were dealing with is: people sometimes cannot see if the div has scrollbars 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); } 

Answer 2

I can clearly see the scroll bar. If you are using a Mac, you can ensure that scroll bars are always displayed.

Answer 3

I am using Crome Version 48.0.2564.97 m

And it works great. Change it to overflow-y: auto, if there are not enough elements in it, it will not show scrolling.

Answer 4

Add this to your css

 .list::-webkit-scrollbar { -webkit-appearance: scrollbartrack-vertical; } 

or

 .list::-webkit-scrollbar { -webkit-appearance: scrollbarthumb-vertical; } 

Answer 5

I am using Windows 8 and the version of Google Chrome is 48.0.2564.97. And his work is beautiful. See In the selected area of ​​the image.