Make element unclickable (click things behind it)

html css mobile scroll touch
hannebaumsaway picture hannebaumsaway · Aug 6, 2013 · Viewed 89k times · Source

I have a fixed image that overlays a page when the user is in the act of scrolling a touch screen (mobile).

I want to make that image "unclickable" or "inactive" or whatever, so that if a user touches and drags from that image, the page behind it still scrolls as if the image weren't there "blocking" the interaction.

Is this possible? If need be, I could try to provide screen shots exemplifying what I mean.

Thanks!

Answer

Chris Brown picture Chris Brown · Aug 6, 2013

Setting CSS - pointer-events: none should remove any mouse interaction with the image. Supported pretty well in all but IE.

Here's a full list of values pointer-events can take.

Related questions

Make an image responsive - the simplest way

I notice that my code is responsive, in the fact that if I scale it down to the size of a phone or tablet - all of the text, links, and social icons scale accordingly. However, the ONLY thing that …

Read More
How can I "disable" zoom on a mobile web page?

I am creating a mobile web page that is basically a big form with several text inputs. However (at least on my Android cellphone), every time I click on some input the whole page zooms there, obscuring the rest of …

Read More
Check box size change with CSS

How can I change check box sizes (globaly) without class and id? Is it possible to do this in a way different from: input[type=checkbox] { zoom: 1.5; }

Read More