Hammer.js how to pan an element and scale it progressively?

Question

I want to pan an element only vertically and it gets resized and minimized (transforming scale and origin) until reaching the bottom of the screen when I release the touch. This behaviour that I try to reproduce is very simillar with the behaviour of the video stream on youtube(when you drag the video down it sends the container in the bottom right of the screen).

function dragStart(e) {
    var transforms = [];
    e.preventDefault();

    currentScale = adjustScale - (e.distance/1000);
    console.log(currentScale);
    currentDeltaX = adjustDeltaX + (e.deltaX / currentScale);
    currentDeltaY = adjustDeltaY + (e.deltaY / currentScale);

    transforms.push('scale(' + currentScale + ')');

    elem.style.transform = transforms.join(' ');
    elem.style.transformOrigin = "100% 100%";
}

This is a sample of my code: https://codepen.io/ACondur/pen/qVYeVJ

The questions are:

How to make the pan accept only vertical pan?

How to make the element scale properly?

How to stop the panning of the element when it reaches the width that I want it to be?