Why hammer.js swiping does not work for iPhone

Question

I couldn't find a more direct way to ask people who are familiar with hammer.js so i'm posting here.

So i've been working on a web app with 8thwall using hammer.js for swiping/scrolling. i've been testing it on my samsung 10 and only now testing on the iphones. The swiping/scrolling has been working fine with my samsung 10 but it doesnt work at all with iphones that i could get my hands on. I've tried iphone 8plus, iphone xr, iphone 6s. Please advise on what i need to do. Thank you.

my codes :

 //SCROLLING FUNCTION
    AFRAME.registerComponent('scroll-lines', {
        init: function(){
            var container = document.getElementById("scrolling-container");
            var content = document.getElementById("button-collections");
            var hammer = new Hammer(container);

            var initialX = 0;
            var deltaX = 0;
            var offset = initialX + deltaX;

            hammer.on("panleft panright", function(ev) {
                deltaX = ev.deltaX;
                offset = initialX + deltaX;

                container.scroll(-offset, 0);
            });

            Hammer.on(container, "mouseup", function(e) {
                initialX = offset;
            });
        }
    })

<!--SCROLLING BUTTONS-->
<!--IN ORDER FOR THESE TO BE DISPLAYED NEED TO STYLE THE Z-INDEX: 10. REFER style.css PAGE-->
<div id="scrolling-container">
    <div id="button-collections">
        <div id="box-all" class="cantap"></div>
        <div id="box-seremban" class="cantap"></div>
        <div id="box-klang" class="cantap"></div>
        <div id="box-ampang" class="cantap"></div>
        <div id="box-petaling" class="cantap"></div>
        <div id="box-kj" class="cantap"></div>
        <div id="box-ekspres" class="cantap"></div>
        <div id="box-transit" class="cantap"></div>
        <div id="box-monorail" class="cantap"></div>
        <div id="box-kajang" class="cantap"></div>
        <div id="box-skypark" class="cantap"></div>
    </div>
</div>

The CSS:

#scrolling-container{
    z-index: 10;
    position: absolute;
    display: flex;
    top: 55%;
    width: 100%;
    cursor: pointer;
    background-color: red;
}
#button-collections{
   display: flex;
   flex-direction: horizontal;
   overflow: scroll;
   height: 150px;
   padding-top: 170px;
   width: 100%;
}

UPDATE: I tried the suggestions below but they did not resolve the issue. I found that if i used var hammer = new Hammer(container); it works for android not iOS but if i use var hammer = new Hammer(content); it works for both but at the mouseup function i am not able to scroll to the end for both iOS and android. using panleft, panright, panend

UPDATE 2: So since hammerjs is sorta working on the iphone, my question is sort of answered. closed question. opened a new follow up question for current situation

Daniel Tok · Answer 1 · 2019-08-30T08:37:32.093

0

Well are you sure you want to use pan? Pan is for dragging basically. Swipe is called swipe in hammer.js. It could be that on android the correct gesture is triggered, but not on iphone. If you move your finger fast, its a swipe, and won't be recognized as a pan. Also instead of mouseup you should use panend probably (because maybe android fires mouseup, and iphone doesn't).

Possible events with pan are:

panstart
panmove
panend
pancancel
panleft
panright
panup
pandown

edited Aug 30 '19 at 08:37

answered Aug 30 '19 at 08:32

Daniel Tok

207
1
9

So if i used `var hammer = new Hammer(container);` it works for android not iOS but if i use `var hammer = new Hammer(content);` it works for both but at the `mouseup` function i am not able to scroll to the end for both iOS and android. using panleft, panright, panend – Sep 10 '19 at 05:51

Tal · Answer 2 · 2019-08-30T08:44:19.723

0

Try to use swipeleft and swiperight events instead of pan events.

edited Aug 30 '19 at 08:44

answered Aug 30 '19 at 08:37

Tal

1,091
12
25

score 0 · Answer 3 · answered Sep 03 '19 at 03:45

0

Without a cursor defined on the elements iOS does not fire the mousedown or mouseup client-side events which are needed for swipe. See How to make my 'click' function work with iOS.

Assign a class ios-device to your <body> when you detect iOS and use the following style.

body.ios-device {
    cursor: pointer !important; /* iOS click events don't fire without this! */
}

answered Sep 03 '19 at 03:45

Dave Anderson

11,836
3
58
79

So if i used var hammer = new Hammer(container); it works for android not iOS but if i use var hammer = new Hammer(content); it works for both but at the mouseup function i am not able to scroll to the end for both iOS and android. using panleft, panright, panend – Sep 10 '19 at 06:03

Why hammer.js swiping does not work for iPhone

3 Answers3