How can I enable two-finger scrolling on mobile web browsers?

Question

How can I enable two-finger scrolling on mobile web browsers?

I am currently tackling a project that involves dragging operations on a canvas, making scrolling with a single finger impractical. My goal is to enable scrolling using two fingers instead.

After testing different touch-action values, I discovered that pinch-zoom brings me close to what I need, but unfortunately, it also zooms the page. Trying various workarounds to disable zoom caused multiple issues. I also explored custom scrolling using gesture events, but it resulted in poor performance compared to native scrolling.

Is there an elegant solution to enforce two-finger scrolling without pinch-to-zoom functionality?

javascript html css

Answer 1

Answer №1

To prevent zoom, follow these steps:

<meta name='viewport' 
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, 
     user-scalable=0' >

Additionally, include the following code in your addEventListeners at the beginning of the function:

  e.preventDefault()

For multi-touch detection, utilize the following resource =>

https://github.com/zlatnaspirala/multi-touch-canvas-handler/blob/master/index.html
This is a multi-touch handler.

In your draw or update function, incorporate this check ->



if (CONTROL.MULTI_TOUCH_X1 !== 'undefined' && 
    CONTROL.MULTI_TOUCH_X2 !== 'undefined'){

       // Do it now ... 

}

// Possibly typeof is not necessary
if (CONTROL.MULTI_TOUCH_X1 !== 'undefined' && 
    typeof CONTROL.MULTI_TOUCH_X2 == 'undefined'){

       // Do something to prevent scroll 
       // if needed 

}

If you opt not to use the multi-touch library, you can find the second touch as follows:


document.addEventListener("touchstart",
  function (event) {

      var touch = event.touches[0];
      // CONTROL.X = touch.pageX;
      // CONTROL.Y = touch.pageY;
      
      var touches_changed = event.changedTouches;

      for (var i = 0; i < touches_changed.length; i++) {
         if (i == 1) {
           ...
         }
      }

 }

Answer 2

To prevent zoom, follow these steps:

<meta name='viewport' 
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, 
     user-scalable=0' >

Additionally, include the following code in your addEventListeners at the beginning of the function:

  e.preventDefault()

For multi-touch detection, utilize the following resource =>

https://github.com/zlatnaspirala/multi-touch-canvas-handler/blob/master/index.html
This is a multi-touch handler.

In your draw or update function, incorporate this check ->



if (CONTROL.MULTI_TOUCH_X1 !== 'undefined' && 
    CONTROL.MULTI_TOUCH_X2 !== 'undefined'){

       // Do it now ... 

}

// Possibly typeof is not necessary
if (CONTROL.MULTI_TOUCH_X1 !== 'undefined' && 
    typeof CONTROL.MULTI_TOUCH_X2 == 'undefined'){

       // Do something to prevent scroll 
       // if needed 

}

If you opt not to use the multi-touch library, you can find the second touch as follows:


document.addEventListener("touchstart",
  function (event) {

      var touch = event.touches[0];
      // CONTROL.X = touch.pageX;
      // CONTROL.Y = touch.pageY;
      
      var touches_changed = event.changedTouches;

      for (var i = 0; i < touches_changed.length; i++) {
         if (i == 1) {
           ...
         }
      }

 }

How can I enable two-finger scrolling on mobile web browsers?

Answer №1

Similar questions

Customize the asset path location in Webpack

From Vanilla Javascript to ES6 Spread Operator

Which event listener in the DOM API should I use to trigger an action when a form field is focused, whether through a mouse click or by tabbing?

Ways to integrate a CSS file into XSLT

How to make Vuetify grid columns wrap and fill the full height

Analyzing all the <option> elements within a <select> tag with jQuery

href not functioning properly on subsequent clicks, whereas onclick remains active

How can I automatically redirect a React page once I receive a response from Express?

Deliver compressed data in gzip format from a Node.js server to the client using socket.io

Examining the false positive detection of an apparent visibility issue with

The npm package for @azure/storage-blob doesn't seem to play nice with the Azure Blob storage modules for IoT Edge

What is the best practice for incorporating CSS and JavaScript files into a PHP template?

How to loop through a list variable using Razor syntax in an HTML document

Rotating elements with timed jQuery

What is the best way to generate a CSS design with wavy patterns?

Transferring files and information using the Fetch API

How require works in Node.js

Exploring the world of AngularJS with nested JSON structures and utilizing ng-repeat

Tips for effectively placing a page scope block using BEM

Chrome fails to read font family correctly