Smooth Scrolling on Mobile

Mobile Scroll

Enable momentum scrolling for overflow containers on iOS and handle scroll events efficiently with throttling.

Example

/* Momentum scrolling on iOS */
.scrollable-area {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* jQuery scroll handler with throttle */
let scrollTimer;
$(window).on("scroll.mobile", function() {
  clearTimeout(scrollTimer);
  scrollTimer = setTimeout(function() {
    const pos = $(window).scrollTop();
    if (pos > 200) $("#back-top").fadeIn(); else $("#back-top").fadeOut();
  }, 50);
});

JAVASCRIPT

Full Editor

Pro Tip

overscroll-behavior: contain prevents page scroll from triggering when reaching the end of a scrollable div.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned