htmlcssmobilescrolltouch

Make element unclickable (click things behind it)

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!

Solution

  • 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.