1

I'm trying to create a navigation so that the overflow is scrollable left and right when the display is too small (I.e mobile) and with no scrollbar

See the following page that does exactly this:

https://developers.google.com/cast/

(for visitors from the future, maybe look here: https://web.archive.org/web/20150814005541/https://developers.google.com/cast/)

The navigation I'm referring to is:

HOME | GUIDES | REFERENCE | SAMPLES | SUPPORT

If you make your browser window small (or check on mobile) you'll see that the nav is cut off at about "SAMPLES", but you can you can drag left to show "SUPPORT". On desktop you'll have to click in the area and use arrow keys for same effect.

It works with JavaScript turned off, so this is a pure CSS solution.

On inspecting the CSS I can see overflow-y:hidden is part of it and white-space:nowrap but that since overflow-y refers to the vertical access I'm not sure why that features.

Jon
  • 452
  • 4
  • 23

2 Answers2

1

The CSS overflow-y property specifies the effect of the top/bottom edges when element content is overflowed.

Reference: http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

For left/right edges the overflow-x property is used. So in the navigation bar the overflow-y: hidden; property specifies that the top/bottom edges should hide the content. This doesn't effect the left/right scrolling edges.

Generally if you want to create a vertical scrolling element, then you can do:

#con {
  width: 300px;
  overflow-x: scroll;
  background: orange;
}

#a {
  width: 1200px;
  background: orange;
}
<div id="con">
  <div id="a">
    <h1>Hey there! I'm a big big big big big big big big H1 element</h1>
    <p>How are you? I'm a paragraph. I'm inside an element with <code>overflow-x: scroll</code>. That's cool.</p>
  </div>
</div>

Hope that helps.

Abraar Arique Diganto
  • 1,215
  • 16
  • 24
  • Thanks @Abraar. However, I want the nav to be scrollable *horizontally* from left to right with no scrollbar visible, exactly like the Google example above. I have added the note about the scrollbar to the original question now, sorry for confusion. – Jon Aug 15 '15 at 03:39
  • @Jon I have took a look at the Google example, and it has a scrollbar as well. But by default, the scrollbar doesn't show up on mobile devices. So if you're viewing on a mobile device then you won't see a scrollbar. However, if you view it on desktop and then resize the browser window to a small screen, then you'll see the scrollbar. – Abraar Arique Diganto Aug 15 '15 at 03:43
  • I think you may be mistaking the white underline of the 'Home' link for the scrollbar? This is what I see on Chrome mobile emulator: http://i.imgur.com/q7okRbv.gif and this on narrow desktop: http://i.imgur.com/SHCf5Nt.gif (note I am using arrow keys to move nav on desktop) – Jon Aug 15 '15 at 04:06
  • @Jon No, not mistaking with the white underline. What I'm trying to say is, the default behavior of `overflow-x: scroll;` is that it'll show the scrollbar on desktop browsers, but won't show it on mobile browsers. The Google page doesn't show scrollbar on mobile view (http://imgur.com/xS3WtTh), but on desktop it does: http://imgur.com/ID4oJPa So if you view my example above on a desktop, it'll show the scrollbar, but on mobile browsers it won't. – Abraar Arique Diganto Aug 15 '15 at 05:18
  • Ah, so Firefox shows the scrollbar but Chrome doesn't – Jon Aug 15 '15 at 05:24
  • @Jon Yes, the scrollbar is a feature of the browser and different browsers will render it differently. But in general, elements with `overflow: scroll` will render a scrollbar on desktop browsers but won't render it on a mobile browser. – Abraar Arique Diganto Aug 15 '15 at 06:52
0

Lots of variants in the examples on this page, although I'm not 100% sure any of them answer the question of how Google is doing it in the example.

The solution I have gone for is to allow the scrollbar as default, and simply have a container div that is restricted in height therefore obscuring the scrollbar from view.

Although not the most elegant solution this avoids a lot of cross-browser issues until vendors allow designers more control over how overflow-x and overflow-y work imo.

Jon
  • 452
  • 4
  • 23