How to switch between transform-origin and scrollbars

Question

I have this code above who switch between CSS transform-origin and scale to CSS width and scrollbars.

I need to make this switch because I am having a pinch to zoom for a DIV wrap I'm using in my website.

I'm using CSS translateX and translateY and Scale for a smoother pinch zoom, but after the zoom take place, I need to return back to width and scrollbar so the user can move across the layout.

I have here an example of how I'm doing the switch and there is a bit margin on top that I can't really set mind my on.

what is the correct way to do so?

var isOrigin = false;
        var originX = 500;
        var originY = 200;
        var scale = 1.5;
        var deltaX = 0;
        var deltaY = 0;

        var from_origin_to_scroll = function () {
            if (isOrigin) { from_scroll_to_origin(); return; }

            var wrap = $('.containter .wrap');

            //reset scroll
            const el = document.scrollingElement || document.documentElement;
            $('.containter')[0].scrollLeft = 0;
            el.scrollTop = 0;

            wrap.css({
                transformOrigin: originX + "px " + originY + "px",
                transform: "translate3d(" + deltaX + "px," + deltaY + "px, 0) " +
                              "scale3d(" + scale + "," + scale + ", 1) ",
                width: 100 + '%'
            });

            isOrigin = true;

            $('.info').html('layout set by origin and scale');
        }

        var from_scroll_to_origin = function () {
            var wrap = $('.containter .wrap');

            wrap.css({
                transformOrigin: originX + "px " + originY + "px",
                transform: "translate3d(" + 0 + "px," + 0 + "px, 0) " +
                              "scale3d(" + 1 + "," + 1 + ", 1) ",
                width: (100 * scale) + '%'
            });

            $('.containter')[0].scrollLeft = originX * (scale - 1);

            const el = document.scrollingElement || document.documentElement;
            el.scrollTop = originY * (scale - 1);

            isOrigin = false;

            $('.info').html('layout set by width and scroll');
        }

body {
            margin: 0;
            padding: 0;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            width:100vw;
        }

        .top{
            position: fixed;
            width: 100%;
            background-color: #333;
            line-height: 40pt;
            text-align: center;
            color: #f1f1f1;
            font-size: 20pt;
            left: 0;
            top: 0;
            z-index: 10;
        }

        .top .info{

        }
        
        .header_content
        {
          background-color: #e1e1e1;
          line-height:130pt;
        }

        .containter {
            width:100%;
            box-sizing: border-box;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }

        .containter .wrap {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        .containter .wrap img {
            width: 100%;
            margin-top: 30pt;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
        <div class="info" onclick="from_origin_to_scroll()">click to switch</div>
    </div>
    <div class="header_content">
    this is a header content - needs to be added to overall calculation
    </div>
    <div class="containter">
        <div class="wrap">
            <img src="https://thumb7.shutterstock.com/display_pic_with_logo/91858/594887747/stock-photo-dreams-of-travel-child-flying-on-a-suitcase-against-the-backdrop-of-sunset-594887747.jpg" />
            <img src="https://thumb9.shutterstock.com/display_pic_with_logo/1020994/556702975/stock-photo-portrait-of-a-happy-and-proud-pregnant-woman-looking-at-her-belly-in-a-park-at-sunrise-with-a-warm-556702975.jpg" />
            <img src="https://thumb7.shutterstock.com/display_pic_with_logo/234100/599187701/stock-photo-funny-little-girl-plays-super-hero-over-blue-sky-background-superhero-concept-599187701.jpg" />
            <img src="https://thumb1.shutterstock.com/display_pic_with_logo/1316512/661476343/stock-photo-funny-pineapple-in-sunglasses-near-swimming-pool-661476343.jpg" />
            <img src="https://thumb1.shutterstock.com/display_pic_with_logo/2114402/689953639/stock-photo-adult-son-hugging-his-old-father-against-cloudy-sky-with-sunshine-689953639.jpg" />
            <img src="https://thumb7.shutterstock.com/display_pic_with_logo/172762/705978841/stock-photo-businessman-looking-to-the-future-for-new-business-opportunity-705978841.jpg" />
        </div>
    </div>

Answer 1

In your case the possible solution is to detect when the user is trying to zoom, and when just to scroll.

const $container = $(".container");
$container.on('touchstart', function (e) {
  if (e.touches.length > 1){
    //more than one finger is detected on the screen,
    //change mode to transform-origin
    from_scroll_to_origin()
  }
});

$container.on('touchend', function (e) {
  //change mode to scrollbars
  from_origin_to_scroll()
});