JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
    <ul class="playlist">
       <li>element1</li>
       <li>element2</li>
       <li>element3</li>
       <li>element4</li>
       <li>element5</li>
       <li>element6</li>
       <li>element7</li>
       <li>element8</li>
       <li>element9</li>
    </ul>

CSS

.playlist {
         position:absolute;
         top:0;
         left:0;
         right:0;
         height:56px;
         overflow-x:scroll;
         white-space:nowrap;
    }

    .playlist>li {
         display:inline-block;
         min-width:200px;
         min-height:40px;
         background-color:red;
         touch-action: pan-x;
    }

JavaScript

var options={
        touchAction:"pan-x"
    };
    var hammer = new Hammer.Manager(document.querySelector(".playlist"), options);

    hammer
        .add( [
                new Hammer.Pinch({ threshold: 0 })
        ] )
        .on("pinchstart", function(e) {
            console.log("pinch start");
        })
        .on("pinch", function(ev) {
            console.log("pinch");
        });