CODEWITHSUNDEEP
javascripthtmlcss
s.zane
s.zane

Reputation: 165

body touch-action: none, but be able to pinch to zoom a div

As the title says, I'd like to know if it's possible to enable only a specific div when body is set to touch-action: none.

My goal is to block all the browser zoom, but allow to zoom in a specific part of it (maybe an image).

Is this possible? maybe in Javascript or pure CSS?

my code is the following:

$("#no-zoom").click(function(){
   if( $('body').css('touch-action') == 'none' ) 
    $('body').css("touch-action","")
   else
    $('body').css("touch-action","none");
    $('.zoom').css("touch-action","pan-x pinch-zoom");
});

Obviously, this part is not working: $('.zoom').css("touch-action","pan-x pinch-zoom");

Thank you!

Upvotes: 1

Views: 3267

Answers (1)

Henfs
Henfs

Reputation: 5411

You can use siblings: .notouch and .content.

.notouch will cover all the page and .content will contain elements that can suffer touch interactions.

<body>
    <div class="notouch"></div>
    <div class="content">
        <div class="image"></div>
    </div>
</body>

body {
    position: relative;
}
.notouch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
}
.content {
    position: relative;
    width: 0;
    height: 0;
}
.image {
    width: 200px;
    height: 200px;
    background: #d3d3d3;
}

Like this, you can use zoom only inside .image.

Upvotes: 3

Related Questions