javascript - css touch-action none on body, pinch-zoom on element - Stack Overflow

admin管理员组

文章数量:1316382

I am trying to apply this:

body {
  touch-action: none;
}

.left-side {
  touch-action: pinch-zoom;
}

<div class="left-side"><img src="image.jpg" /></div>

The touch-action: none is working, but left-side is now :(

What am I doing wrong? Or does the body override everything?

I am trying to apply this:

body {
  touch-action: none;
}

.left-side {
  touch-action: pinch-zoom;
}

<div class="left-side"><img src="image.jpg" /></div>

The touch-action: none is working, but left-side is now :(

What am I doing wrong? Or does the body override everything?

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Sep 26, 2018 at 20:29 user979331 asked Sep 26, 2018 at 18:54 user979331user979331 12k8383 gold badges248248 silver badges451451 bronze badges 4

• 2 You should include your HTML. Also note, there are (a few) elements which do not support touch-action. – Matthew Moore Commented Sep 26, 2018 at 19:50
• Added my html to my question – user979331 Commented Sep 26, 2018 at 20:30
• So, basically what do you want to achieve? Touch-driven zooming with multiple-fingers is permitted. Can be bined with pan-x, pan-left or pan-right; and pan-y pan-up or pan-down. It is not possible in desktop version. – KamalaH Commented Sep 27, 2018 at 4:30
• @CharmingZooZoo How do you actually... you know... pinch-zoom to zoom, not pan? – Michael Commented May 15, 2019 at 4:09

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The touch-action value pinch-zoom, is a modifier of sorts. According the The MDN spec, it is used in bination with other values:

The touch-action property may be specified as either:

• any one of the keywords auto, none, manipulation, or
• one of the keywords pan-x, pan-left, pan-right, and/or one of the keywords pan-y, pan-up, pan-down, plus optionally the keyword pinch-zoom.

pinch-zoom does nothing on its own, it simply lets the browser know that it should allow two finger gestures to be used; to control the actions listed along with it.

So if you want to allow multi finger support to pan the page sideways, you would use:

.left-side {
   touch-action: pan-x pinch-zoom;
}

Note: Keep in mind that this functionality is only for touch devices; mouse and accessible systems won't reflect any functionality changes with it.

These properties are not really what they look to be:

The touch-action CSS property allows a developer to restrict how a user can interact with an element which is especially helpful to prevent events being dispatched when it's not necessary.

You cannot really add any touch interaction that was not there already, but you can restrict touch interactions that are there if you need to. So what does the pinch-zoom do then?

If you pinch on a website it'll generally zoom in on the pages content. Defining a touch-action will prevent this behavior, but adding pinch-zoom will re-enable this behavior.

I am not aware of any pinch-zoom CSS solution, but it's doable with a bit of javascript (touchstart, touchmove, touchend give you all you need). There are also libraries providing convenient wrappers for mon gestures, like hammerjs.

You can read more about touch-action here.

本文标签： javascriptcss touchaction none on bodypinchzoom on elementStack Overflow