CODEWITHSUNDEEP
htmlcssmobile-safari
Nine Magics
Nine Magics

Reputation: 737

How to fix horizontal scroll on iOS (Mobile)

I have a weird issue that bugs me. I've setup a project with html/css that enables horizontal scrolling. This works fine for PC/Android but doesn't work on iOS unless I drag at the edge of the screen (which takes me to the previous or next page visited) and drag back again. When doing this I'm allowed to scroll perfectly until the scroll stops. If I want to scroll again I have to repeat the drag gesture. It's like the scrolling area won't get focus or something. Snippets of the attempt (HTML):

<div class="scrollable">
    <div class="scrollable-content">
        <div id="tournaments-horizontal">
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
            <div class="tournament-h-container"></div>
        </div>
    </div>
</div>

CSS: http://pastebin.com/aUsQQUjm

I would really appreciate if someone knew something about this. Again, to repeat the "solution" for iOS:

  1. Load the page
  2. Try to scroll in the scrolling area (nothing happens)
  3. Drag at either edge of the screen in Safari (you will see the previous/next page the browser has queued) but don't drag all the way. Just get a glimpse of that page and then drag back to the current page
  4. Now you can scroll as expected (until the scrollbar disappears).
  5. Repeat step 3-4

(Screwed up the code tag so I decided to link to a pastebin instead).

Thanks in advance!

Upvotes: 5

Views: 24891

Answers (2)

Rodrigo Jo&#227;o Bertotti
Rodrigo Jo&#227;o Bertotti

Reputation: 5501

My issue was that on iPad when touching some divs (like <table>) I couldn't scroll horizontally, neither zoom-in/out

I fixed by calling event.stopPropagation() of the touchmove event on those divs

The way that I did was identifying those divs like

<table class="fix-ipad-scroll"> 
    ...
</table>

so I could run this code:

const elements = document.getElementsByClassName('fix-ipad-scroll');

if(elements.length == 0){
   console.error(
     "Ops, no element with the 'fix-ipad-scroll' " +
     "class found, you need to fix that"
   );
}
   
for(let i=0;i<elements.length;i++){
   elements.item(i).addEventListener("touchmove", (ev) => {
      ev.stopPropagation();
   });
}

Upvotes: 5

Rick
Rick

Reputation: 485

Add this to your CSS:

.scrolling-element {
    overflow-x: scroll; /* Must be 'scroll' not 'auto' */
    -webkit-overflow-scrolling: touch;
}

Upvotes: 14

Related Questions