Search code examples
htmlcssipad

Scrolling on IPad

I have the next code:

> <div class="scroller" style="width: 100%; height: 300px; overflow:
> auto; overflow-y: hidden;">
>     <div class="content" style="height: 100%; width: 2500px;">
>         <div id="vScrollDiv" style="width: 500px; height: 100%; overflow: auto; color: #fff; display: inline-block">
>             Content that makes div overflow verticaly
>         </div>
>         <div style="width: 1900px; height: 100%; color: #000; display: inline-block">
>             Content that makes "scroller" div overflow horizontaly
>         </div>
>     </div>

How can I scroll horizontally the content div when my finger is over the div that scrolls only vertically and I gesture like I want to scroll horizontally?

Solution

  • I was able to catch the touch events and scroll the right divs by identifying "clicked" div and calculating the trajectory of the drag. More infos about the touch events: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html Scrolling made with: http://demos.flesler.com/jquery/scrollTo/