CODEWITHSUNDEEP
htmlioscssiphonescroll
Pejs
Pejs

Reputation: 265

Simultaneous up/down - left/right scrolling not working on iphone

Going mental about that thing: I have a following structure of divs:

<div class="main">
    <div class="container">
        <div class="column">        
            <div class="content">
                <div class="block"></div> (repeat 4 times)
            </div>
        </div>
        <div class="column">
            <div class="content">
                <div class="block"></div> (repeat 4 times)
            </div>
        </div>
        <div class="column">
            <div class="content">
                <div class="block"></div> (repeat 4 times)
            </div>
        </div>
    </div>
</div>

CSS:

.main {
    overflow-x: scroll;
    width: 400px;        
}

.block {
    display: block;
    width: 300px;
    height: 80px;
    background-color: blue;
    margin: 5px;
}

.container {
    width: 1000px;
}

.column {
    float: left;
    height: 300px;
}

.content {
    height: 300px;
    overflow: scroll;
}

The idea of this layout it to have one big container, scrolling horizontally, that contains smaller containers that scroll vertically.

Issue: while it works perfectly on android and desktops, can't get it to work on iphone with safari (can't test on chrome for iOS though, don't have access to device). Instead of scrolling the container, iphone scrolls entire page (please try to scroll left-right while keeping finger on blue rectangles). Please see this jsfiddle on iphone.

I do figured out reading stackoverflow and testing by myself that it has something to do with css overflow property, but still can't figure out the solution.

Any ideas please?

Upvotes: 1

Views: 555

Answers (1)

Pejs
Pejs

Reputation: 265

So once again the solution was to add -webkit-overflow-scrolling:touch; in the right place of the code. In this case it was the very top main container and get rid of unnecessary overflow properties:

.main {
    overflow-x: scroll;
    width: 300px;
    -webkit-overflow-scrolling:touch;
}

Tested on the emulator, but looks like working now. JSFiddle

Upvotes: 1

Related Questions