The challengeToday, one of our clients asked us improve the user experience in a responsive website by adding the possibility to scroll when with “a touch” of the user when he visits the website with his iPad, in this case we have a huge data table, and for that reason the resolution of the iPad is not enough to show all the columns in it.
SolutionSo after looking for some information, this is the way we reached the expected result: 1) We created a scrollable-container, this div has the huge data table:
<div class="scrollable-container scrollable-touch">
-webkit-overflow-scrolling: touch; /* Enable touch scrolling in webkit browsers */
height: 640px; /* We use a fixed height in the div */
overflow: scroll; /* We set the overflow to scroll in desktop */
overflow-x: hidden; /* Hide scrollbar on x-axis */