javascript – hammer.js does not detect swipes.

Hammer.js doesn’t detect a swipe when I use “Touch Action: Pan-X! Important use” on this ID, it works when I don’t use Touch Action but then the scroll doesn’t work on my site Is.

I’m sorry if the code looks bad:

                <ul id="sportCourtsRow">
                <div style="margin-left: 32vw;">
                    {% for c in courtsB %}
                                <input type="radio" name="sportCourts" class="sportCourts"><div class="sportsCourtsTxt">{{c}}</div>
                    {% endfor %}

<p id="abc></p>

var hammertime = new Hammer(document.getElementById("sportCourtsRow"));
        hammertime.get('swipe').set({ threshold: 10 });
        hammertime.on('swipe', function(ev) {
            document.getElementById("abc").innerHTML = "works!" //check if swipe works.

    position: fixed;
    margin-top: 28vh;
    height: 6vh;
    width: 100vw;
    background-color: #dfdddd;
    border-bottom: 1px solid black;
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x !important;

    font-family: 'alef';
    font-size: 2.5vh;
    margin-top: 1vh;
    margin-right: 100vw;
    text-align: center;

Leave a Reply

Your email address will not be published.