Looking for assistance from those experienced with hammer.js, as I'm facing an issue with swiping/scrolling on iPhones.
I have been developing a web app using 8thwall and hammer.js for swipe and scroll functionality. While testing on my Samsung Galaxy S10, everything works perfectly. However, when testing on various iPhone models such as iPhone 8 Plus, iPhone XR, and iPhone 6s, the swiping and scrolling do not function at all. Any guidance on how to resolve this would be greatly appreciated. Thank you.
Here are snippets of my code:
//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-->
<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: Tried suggested solutions but no resolution. Discovered that using var hammer = new Hammer(container); works for Android but not iOS. Meanwhile, var hammer = new Hammer(content); works for both platforms, though there's an issue with scrolling to the end on mouseup for both iOS and Android when utilizing panleft, panright, and panend events.
UPDATE 2: As hammerjs is somewhat functional on iPhones now, the initial question has been partially answered. Closing this query and opening a new one to address the current situation.