Preventing the pull-down-to-refresh feature on Chrome mobile can be achieved by adjusting the

Question

Preventing the pull-down-to-refresh feature on Chrome mobile can be achieved by adjusting the

Looking for a way to prevent the pull-down-to-refresh feature on mobile Chrome, especially iOS Chrome? My web application utilizes vertical panning events with device-width and device-height viewport settings, but each time I pan down, mobile Chrome refreshes due to the browser's default behavior. Additionally, on Safari browser, the screen rolls during panning events. I need to find a solution to disable these unwanted actions.

I've already tried using event.preventDefault(); and touch-action: none;, but they don't seem to be effective. Should I consider adding an event listener and touch-action "on body tag"? I'm hoping for a helpful response with an example included.

javascript ios css mobile

Answer 1

Answer №1

For the most recent Chrome updates:

html,
body {
    overscroll-behavior-y: contain;
}

An alternative approach:

Starting from mobile Chrome version 56, event listeners are passive by default. Passive event listeners no longer have the ability to prevent defaults. Here is further information. You must now utilize active event listeners like this:

document.addEventListener('touchstart', touchstartHandler, {passive: false});
document.addEventListener('touchmove', touchmoveHandler, {passive: false});

Answer 2

For the most recent Chrome updates:

html,
body {
    overscroll-behavior-y: contain;
}

An alternative approach:

Starting from mobile Chrome version 56, event listeners are passive by default. Passive event listeners no longer have the ability to prevent defaults. Here is further information. You must now utilize active event listeners like this:

document.addEventListener('touchstart', touchstartHandler, {passive: false});
document.addEventListener('touchmove', touchmoveHandler, {passive: false});

Answer 3

Answer №2

Here's a solution you can try:

body {
  /* Use this code to disable pull-to-refresh but allow overscroll glow effects. */
  overscroll-behavior-y: contain;
}

I found this solution helpful when I was experiencing strange scrolling issues caused by other javascript hacks. For more information, check out this article:

https://developers.google.com/web/updates/2017/11/overscroll-behavior

Answer 4

Here's a solution you can try:

body {
  /* Use this code to disable pull-to-refresh but allow overscroll glow effects. */
  overscroll-behavior-y: contain;
}

I found this solution helpful when I was experiencing strange scrolling issues caused by other javascript hacks. For more information, check out this article:

https://developers.google.com/web/updates/2017/11/overscroll-behavior

Answer 5

Answer №3

Using scroll behavior none has been effective for me.

body {
    overscroll-behavior: none 
}

Answer 6

Using scroll behavior none has been effective for me.

body {
    overscroll-behavior: none 
}

Answer 7

Answer №4

After trying multiple css-only solutions without success, I took a different approach:

(function() {
    var touchStartHandler,
        touchMoveHandler,
        touchPoint;

    // Specific handling for touch events on Chrome
    if ((window.chrome || navigator.userAgent.match("CriOS"))
        && "ontouchstart" in document.documentElement) {

        touchStartHandler = function() {
            // Only need to handle single-touch cases
            touchPoint = event.touches.length === 1 ? event.touches[0].clientY : null;
        };

        touchMoveHandler = function(event) {
            var newTouchPoint;

            // Only need to handle single-touch cases
            if (event.touches.length !== 1) {
                touchPoint = null;

                return;
            }

            // Prevent default behavior when scrolling up
            newTouchPoint = event.touches[0].clientY;
            if (newTouchPoint > touchPoint) {
                event.preventDefault();
            }
            touchPoint = newTouchPoint;
        };

        document.addEventListener("touchstart", touchStartHandler, {
            passive: false
        });

        document.addEventListener("touchmove", touchMoveHandler, {
            passive: false
        });

    }
})();

Answer 8

After trying multiple css-only solutions without success, I took a different approach:

(function() {
    var touchStartHandler,
        touchMoveHandler,
        touchPoint;

    // Specific handling for touch events on Chrome
    if ((window.chrome || navigator.userAgent.match("CriOS"))
        && "ontouchstart" in document.documentElement) {

        touchStartHandler = function() {
            // Only need to handle single-touch cases
            touchPoint = event.touches.length === 1 ? event.touches[0].clientY : null;
        };

        touchMoveHandler = function(event) {
            var newTouchPoint;

            // Only need to handle single-touch cases
            if (event.touches.length !== 1) {
                touchPoint = null;

                return;
            }

            // Prevent default behavior when scrolling up
            newTouchPoint = event.touches[0].clientY;
            if (newTouchPoint > touchPoint) {
                event.preventDefault();
            }
            touchPoint = newTouchPoint;
        };

        document.addEventListener("touchstart", touchStartHandler, {
            passive: false
        });

        document.addEventListener("touchmove", touchMoveHandler, {
            passive: false
        });

    }
})();

Answer 9

Answer №5

When working with iOS, my approach for creating a single HTML page that fills the viewport involved the following solution. This method eliminates any ability to scroll (which may not be ideal for everyone, but it served its purpose effectively for me).

html, body {
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
}

Answer 10

When working with iOS, my approach for creating a single HTML page that fills the viewport involved the following solution. This method eliminates any ability to scroll (which may not be ideal for everyone, but it served its purpose effectively for me).

html, body {
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
}

Preventing the pull-down-to-refresh feature on Chrome mobile can be achieved by adjusting the

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The Tailwind CSS Chrome extension is causing disruptions on the websites I view

SyntaxError: Identifier was not expected

A server-side rendered page in Next.js that functions without the need

I am constantly encountering this issue: Uncaught TypeError - It's impossible to read properties of undefined (specifically 'image') in PromptCard at PromptCard.jsx on line 37

Find the location where the function is declared

Creating a Kendo UI grid within a Kendo UI window and utilizing Knockout JS bindings

Divide the space evenly with minimal gaps

Pair up balls that have matching numbers

Collect information from forms and save it to a mobile phone number

Discover the method for populating Select2 dropdown with AJAX-loaded results

"Trouble in Transmitting: Node.js Fails to

Ways to extract the variable value from two asynchronous functions

Adding information to a single class that shares a common name

Swapping out the document.createElement() method for React.createElement()

In the realm of HTML Canvas, polygons intricately intertwine with one another

Using Underscore.js to Group JSON Data in jQuery

What is the best way to implement an ng-change function on multiple fields within the same page without causing a cyclic call loop?

Strange occurrence with z-index, list items that are floating are not being displayed on top of the heading

Encountering an issue while executing grunt-contrib-imagemin

Having trouble loading this JSON data into my table