How to properly scroll on Safari mobile (iPad)? - html

Question

I need to handle both horizontal and vertical scrolling in a simple way, that works on Safari mobile in general and iPad in peculiar.
I have a very simple HTML/CSS framework which I wanted to keep very simple described as follows.
Find the related fiddle here.
Horizontal scroller
Unfortunately, this requires I compute the width of the scroller, depending on the content. Is there an automatic way?
The HTML is as follows:
<div class="scrollerContainer hScrollable">
<div class="scroller">
<div id="photo1"></div>
<div id="photo2"></div>
<div id="photo3"></div>
<div id="photo4"></div>
<div id="photo5"></div>
<div id="photo6"></div>
<div id="photo7"></div>
<div id="photo8"></div>
<div id="photo9"></div>
</div>
</div>
And the related CSS as follows:
.hScrollable {
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
white-space:nowrap;
}
scrollerContainer {
-webkit-box-sizing: border-box;
width: 100%;
height: 50px;
margin: 0;
border: solid 1px black;
}
.scroller {
-webkit-box-sizing: border-box;
margin: 0;
padding: 4px;
white-space: nowrap;
overflow: hidden; /* Really important to avoid vertical scrolling on devices */
width: 100%;
height: 50px;
background-color: lightgray;
}
.scroller>div {
width: 50px;
height: 50px;
display: inline-block;
}
Vertical scroller
I'd like the content to fill the parent container, and is exceeding the vertical size, scroll vertically.
The HTML is as follows:
<div id="container" style="height:400px">
<div style="height:100px">
Fixed content, I dont want to vscroll
</div>
<div class="tabContent">
Potentially long content that should vscroll.
This div should fill to the end of the container.
I don't want to set its height to 300px,
but to find a way it does automatically.
</div>
</div>

Answer 1

You had a bit TOO much css happening in there. I updated your fiddle with the properties I moved/removed.
I removed .hScrollable and .scrollerContainer from the css and added the overflow properties right to .scroller.
So .scroller now looks like this:
.scroller {
-webkit-box-sizing: border-box;
margin: 0;
padding: 4px;
width: 100%;
background-color: lightgray;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
white-space:nowrap;
}
Here's the fiddle.