CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user979331
user979331

Reputation: 11871

css touch-action none on body, pinch-zoom on element

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?

Upvotes: 3

Views: 7927

Answers (2)

ajobi
ajobi

Reputation: 3116

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 common gestures, like hammerjs.

You can read more about touch-action here.

Upvotes: 2

Matthew Moore
Matthew Moore

Reputation: 866

The touch-action value pinch-zoom, is a modifier of sorts. According the The MDN spec, it is used in combination 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.

Upvotes: 4

Related Questions