JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
<body style="height: 2000px">
  <div id="el" style="height: 700px; width: 50%; background-color: black;"></div>
  <div id="info"/>
</body>

JavaScript

var hammerEl = new Hammer($("#el")[0], { touchAction: "pan-y" });

    hammerEl.get("pinch").set({ enable: true });

    hammerEl.on("panstart", function(e){
      $("#info").append("panstart ");
    });
    hammerEl.on("panend", function(e){
      $("#info").append("panend ");
    });
    hammerEl.on("pinchstart", function(e){
      $("#info").append("pinchstart ");
    });
    hammerEl.on("pinchend", function(e){
      $("#info").append("pinchend ");
    });