CODEWITHSUNDEEP
htmlcssiphonescroll
Yehuda Schwartz
Yehuda Schwartz

Reputation: 3503

iphone scroll down page with horizontal scrolling element

I have a page that has a horizontal scrolling element (a row of images that you can scroll sideways), its pretty simple.
My problem is that on an iPhone if I try to scroll the page vertically and I scroll starting from the area of the horizontal scrolling element, the page doesn't scroll.

On Android devices it works fine, Any ideas why this is happening and how I can fix this?

UPDATE: I found the culprit my themes css has the following html,body {height: 100%;}, I am still interested in understanding why it causes this and how i can fix it without removing that line, (I did not design the theme and can't be sure that css isn't necessary)

div {min-height: 2000px}
ul {white-space: nowrap; overflow-x: scroll;}
li {display: inline-block; margin: 5px; background: #555;}
html,body {height: 100%;}
<div>
stuff<br> stuff<br> stuff<br> stuff<br>
<ul><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li><li>side sliding elemntts</li></ul>
stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br> stuff<br>
</div>

Upvotes: 3

Views: 175

Answers (1)

jnetcodes
jnetcodes

Reputation: 68

You have to make sure the html and body style for height are not set

Upvotes: 2

Related Questions