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]);

    var pan = new Hammer.Pan({
        direction: Hammer.DIRECTION_HORIZONTAL
    });
    var pinch = new Hammer.Pinch({
    });
    hammerEl.add(pan);
    hammerEl.add(pinch);

    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 ");
    });