Overflow-y: Scroll not showing scrollbar in Chrome

Question

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

What other overflow rules do you have? Some browsers don't play nice when you set overflow-x along the overflow-y — putvande
– putvande, Commented Feb 4, 2016 at 12:57

Community · Accepted Answer · 2017-05-23 11:46:19Z

56

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

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Feb 4, 2016 at 14:03

Graham Cairns

9711 gold badge7 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yarin Over a year ago

This 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.

Timo · Accepted Answer · 2016-02-04 12:58:19Z

12

I am seeing scroll bar well. If you are using Mac, you may want to make sure that scrollbars are always shown

answered Feb 4, 2016 at 12:58

Timo

7385 silver badges15 bronze badges

2 Comments

Graham Cairns Over a year ago

Hi 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.

Graham Cairns Over a year ago

Great 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.

Timo · Accepted Answer · 2016-02-04 13:51:14Z

2

Add this to your css

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

or

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

edited Feb 4, 2016 at 13:51

answered Feb 4, 2016 at 13:39

Timo

7385 silver badges15 bronze badges

4 Comments

Graham Cairns Over a year ago

Hi 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.

Graham Cairns Over a year ago

I have shared above @Timo and I have added to the website link too. Many thanks for your input.

Timo Over a year ago

Thanks. No problem :)

Akansh Over a year ago

@Timo It's not working now and coming as Invalid property value.

Ajay Gupta · Accepted Answer · 2016-02-05 08:47:12Z

1

I am using Windows 8 and Google Chrome version is 48.0.2564.97. And its working perfect. See in image highlighted area.

answered Feb 5, 2016 at 8:47

Ajay Gupta

2,98725 silver badges28 bronze badges

Comments

naman · Accepted Answer · 2016-02-04 13:08:20Z

0

I am using Crome Version 48.0.2564.97 m

And it is working just fine.. Change it to overflow-y:auto in case if there are not enough items it will not show scroll.

answered Feb 4, 2016 at 13:08

naman

521 silver badge10 bronze badges

1 Comment

Graham Cairns Over a year ago

I 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.

Collectives™ on Stack Overflow

Overflow-y: Scroll not showing scrollbar in Chrome

5 Answers 5

1 Comment

2 Comments

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related