Scrollable div when touch on iPad

The challenge

Today, 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.

Solution

So 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">             
</div>

2) Then, with a few lines of CSS and using a property that is available for all modern-webkit-based browsers, the result was really cool!

.scrollable-touch {
	-webkit-overflow-scrolling: touch; /* Enable touch scrolling in webkit browsers */
}         

.scrollable-container {
	height: 640px; /* We use a fixed height in the div */ 
	width: 100%;
	overflow: scroll; /* We set the overflow to scroll in desktop */
	overflow-x: hidden; /* Hide scrollbar on x-axis */
}

So, that’s it!

I hope you find useful this article for your future projects.

See you next time, and remember be happy with your code!