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 %}
                        <li>
                            <label>
                                <input type="radio" name="sportCourts" class="sportCourts"><div class="sportsCourtsTxt">{{c}}</div>
                            </label>
                        </li>
                    {% endfor %}
                </div>
            </ul>

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

      #sportCourtsRow
  {
    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;
    
  }

  .sportsCourtsTxt
  {
    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.