Long time client called the other day to tell me the scroll bars on the inner content on his site is not working on iphones and ipads … site is 100% valid so I haven’t a clue what the problem might be. I also don’t have an iphone or ipad to even look at it.
The iPhone, iPad and iPod touch don’t have scroll bars, instead they use finger scroll inputs on the screen to determine what to scroll and which direction it should move. I assume the issue your having is you have a scrollbar set on an element other then the body which is causing a conflict?
Simple solution, on all 3 technologies all you simply need to do is grab 2 fingers (index and middle is common) and start scrolling inside the child element.
For instance, you scroll normally by commonly using your index finger which is great for normal vertical and horizontal scrolling. To scroll inside a child element simply use the same principal but this time use your index and middle finger for example and start scrolling inside the element, what this will do is force Safari to change the scope of what it’s scrolling on the page.
It may sound a little confusing but i actually found the feature by accident and since then it’s worked great on iOS devices.
