javascript - 为什么Hammer.js刷卡不适用于iPhone

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

因此，我一直在使用Hammer.js进行8thwall的Web应用程序的滑动/滚动。我已经在三星10上进行过测试，现在仅在iPhone上进行过测试。滑动/滚动在我的三星10上运行正常，但在我可以接触到的iPhone上根本不起作用。我已经尝试过iPhone 8plus，iPhone XR，iPhone 6S。请告知我需要做什么。谢谢。

我的代码：

 //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 Hammer（container）;它适用于android而不是iOS，但如果我使用var Hammer = new Hammer（content）;它对两者都适用，但是在mouseup功能下，我无法滚动到iOS和android的末尾。使用panleft，panright，panend

更新2：因此，由于Hammerjs可以在iPhone上运行，所以我的问题得到了解答。封闭的问题。对当前情况提出了新的后续问题

最佳答案

好吧，确定要使用平底锅吗？平移基本上是用于拖动。滑动在Hammer.js中称为swipe。可能是在android上触发了正确的手势，但在iphone上却未触发。如果快速移动手指，它就会滑动，而不会被识别为平移。另外，也许应该使用mouseup而不是panend（因为android可能会触发mouseup，而iphone不会）。

pan可能发生的事件是：


泛启动
潘莫夫
潘德
Pancancel
左上角
潘莱特
全景
平移

关于javascript - 为什么Hammer.js刷卡不适用于iPhone，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57721356/