Disabling Android's Chrome Pull-Down-to-Refresh Feature

Modifying scroll behavior

Rather than entirely disabling pull-to-refresh, it's sometimes better to manage touch interactions and scroll behavior with a finer brush.

Custom touch interactions

touch-action: none; on touch-sensitive elements gives the element a "do not disturb" sign, helps with clearer navigation and user interaction.

Scrollable content with boundaries

If you want to manage scroll actions more precisely, setting overflow-y: auto; on a div could be your secret weapon. You can allow scroll where you want, and prevent refresh.

.div-with-superpowers {
  overflow-y: auto;
  overscroll-behavior-y: none; /* Refresh? not on my watch */
}


This strategy offers fine control over the app's navigation.

Utilizing JavaScript's finesse

Using JavaScript or jQuery to preventDefault on touchmove events can introduce conditional control. This is particularly useful when you wish to disable pull-to-refresh but maintain lateral navigation, such as in carousels.

// Carousel enjoys side-to-side dancing, not north-to-south. So, we do this:
document.querySelector('.carousel').addEventListener('touchmove', function(e) {
  if (/* condition to ensure touch direction is side to side */) {
    e.preventDefault();
  }
}, { passive: false });


Browser behavior control and beyond

While CSS provides the basis of functionality, extending into HTML and JavaScript for more universal application is the next step for power users.

Long-term strategies using HTML

Meta tags or site manifests act as a polite suggestion regarding browser behavior. These don't specifically disable pull-down-to-refresh but provide a foundation for future user-customized features.

<meta name="mobile-web-app-capable" content="yes">


This includes a bright indicator light for the browser on possible ways your web app might prefer to behave.

Disabling with JavaScript precision

JavaScript event listeners offer a sharpened tool for disabling pull-to-refresh only when the page is at the very top, adding a fine layer of user experience.

// The page's first cup of coffee in the morning should not be disrupted. So, we do this:
window.addEventListener('touchmove', function(e) {
  if(window.pageYOffset === 0) {
    e.preventDefault();
  }
}, { passive: false });


Performance and charm go hand in hand

Handling touch event handlers can escalate your performance. It's crucial to ensure your website runs at peak performance with these improvements, without any annoying slows or lags. Conduct hands-on tests on various devices to ensure a smooth user experience.