How to fix horizontal scrolling on iOS (Mobile)

I have a weird problem that scares me. I have set up a project with html / css which allows horizontal scrolling. This works great for PC / Android, but doesn't work on iOS unless I drag the edge of the screen (which takes me to the previous or next page) and is pushed back again. With this, I am allowed to scroll until the scroll stops. If I want to scroll again, I have to repeat the drag gesture. This is how the scrolling area will not focus or something. Attempt snippets (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 it if someone knew about this. Again, repeat the iOS "solution":

• Load the page
• Try to scroll the scroll area (nothing happens)
• Drag on any edge of the screen in Safari (you will see the previous / next page that the browser has queued up), but don't drag all paths. Just take a look at this page and then drag back to the current page.
• You can now scroll as expected (until the scroll bar disappears).
• Repeat step 3-4

(Wrapped the code tag so I decided to bind it to pastin).

Thanks in advance!