为什么hammer.js刷卡不适用于iPhone

Question

我找不到更直接的方式来询问熟悉hammer.js的人，所以我在这里发帖。

因此，我一直在开发一个8 8thwall的web应用程序，使用hammer.js进行扫描/滚动。我一直在三星10上测试它，直到现在才在iphones上测试。对我的三星10来说，滑动/滚动一直运行得很好，但对iphones却不起作用，我可以把手放在iphones上。我试过iphone 8+，iphone，iPhone6s。请告诉我该怎么做。谢谢。

我的密码：

 //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>

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%;
}

更新:我尝试了下面的建议，但它们没有解决问题。我发现，如果我使用var hammer = new (容器)；它适用于android而不是iOS，但如果我使用var hammer = new (Content)；它对两者都有效，但在mouseup函数中，我不能同时滚动到iOS和android的末尾。使用pan左侧，panright，panend

更新2:既然锤子在iphone上工作，我的问题就得到了某种程度的回答。封闭的问题。为当前形势打开一个新的后续问题

Answer 1

你确定要用平底锅吗？平底锅基本上是用来拖拉的。Swipe在swipe中被称为hammer.js。它可能是在android上触发了正确的手势，而不是在iphone上。如果你的手指移动快，这是一个滑动，不会被识别为一个锅。另外，你应该使用的是mouseup，而不是panend (因为可能安卓会启动鼠标，而iphone则不会)。

与泛欧议会可能发生的事件如下：

• 泛启动
• 泛移
• 潘伦德
• 薄煎饼
• 板左
• 惊吓
• 帕拉普
• 潘顿

Answer 2

尝试使用旋转和滑动事件而不是pan事件。

Answer 3

如果没有在元素上定义的cursor，iOS就不会触发mousedown或mouseup客户端事件，这些事件是滑动所需的。见How to make my 'click' function work with iOS。

在检测到ios-device并使用以下样式时，将类<body>分配给iOS。

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