CODEWITHSUNDEEP
css
ZK Zhao
ZK Zhao

Reputation: 21613

CSS: horizontal scroll in mobile navigation

This is a mobile version of my website.

mobile version of my website

I want to make the sub-nav(Main|Another Long Category|) be able to scroll horizontally. People could touch the screen and scroll(Rather than using scroll bars like what we have in desktop browsers).

How to do it? I don't know what's effect's name, hence don't know how to describe it properly.

UPDATE: enter image description here I add overflow-x to it. But it stacks up rather than span into a single line.

What's the problem here?

Upvotes: 1

Views: 15448

Answers (1)

Edu Lomeli
Edu Lomeli

Reputation: 2282

UPDATE

Based on comments, you need to calculate total width of your menu elements using jQuery:

$(function(){
    var menuWidth=0;
    $('.wrapper a').map(function(){
        menuWidth = menuWidth + $(this).outerWidth(true);
    });
    // + 15px to fix, this maybe vary in your project
    $('.wrapper').css('width', (menuWidth+15)); 
});

On the container CSS class you need to add:

.subnav{
    overflow-y:hidden;
    overflow-x:scroll; 
    -webkit-overflow-scrolling:touch;
}

DEMO: http://jsfiddle.net/HhHGH/

Basic CSS scrolling

Just add overflow:scroll to your CSS nav class or the fancy way:

Fancy CSS scrolling on iOS

You can try using -webkit-overflow-scrolling:touch in your CSS nav class.

This works pretty well on iOS, for another devices check this questions:

How much support is there for -webkit-overflow-scrolling:touch

Chrome Browser for Android no longer supports -webkit-overflow-scrolling? Is there an alternative?

Upvotes: 2

Related Questions