CSS: How to add momentum scrolling on Safari iOS to elements with overflow: scroll

If you’re a front-end developer working with SASS/CSS, chances are you’ve had to add elements with horizontal scrolling on them. These have become increasingly popular as native scrolling promotes good UX practice and accessibility. The issue is, Safari (and Chrome, Firefox etc) on iOS don’t natively support ‘momentum scrolling’. The same is true of vertical scrolling on items with overflow: scroll too.

What is momentum scrolling on iOS?

Momentum scrolling is the fluid mechanism that allows you to flick a scrollable item, and it eventually slows down to a stop, or hits the end of the scrollable content (whichever happens first). Want to see it in action?

Visit https://goo.gl/ATyrhP from your iOS device. Scroll down to the two boxes. The green has momentum scrolling, the red doesn’t. Try swiping to the left, see what happens on each:

Without momentum scrolling:

How to add momentum (fluid) scrolling on elements with overflow: scroll

It’s a simple one-line rule you need to add to the element with the overflow:

-webkit-overflow-scrolling: touch;

So consider this code (for the momentum scroll box shown above):

 <!-- * The outer div is 100% in width with overflow hidden. * The inner div is set wider than the page to force the scroll. -->
 <div class="scrollable-hz">
   <div class="scrollable-inner">Swipe across to scroll</div>
 </div> <!-- Styles -->
 <style type="text/css">
   .scrollable-hz { 
     width: 100%; 
     height: 100px; 
     overflow-x: scroll; 
     overflow-y: 
     hidden; 
     color: #fff; 
   }
   .scrollable-hz .scrollable-inner { 
     width: 400vw; 
     height: 100px; 
     padding: 20px; 
     background: linear-gradient(to right, #80e02c 0%,#20380b 100%); 
     -webkit-overflow-scrolling: touch; // This is where the magic happens! 
   }
 </style>

Conclusion

To create the most accessible layouts for iOS, you should always consider small edge cases like this. Thinking of small details like momentum scrolling promotes a rich user experience that your visitors will love.

As usual, if you have any questions, feel free to ask away or provide feedback.