Question

好吧，我刚刚在角度指令中使用锤子实现了一个滚动条，我需要一个div可以按页面滚动（某种类型的转盘）所以我不会用hammer.js一切都很好用于桌面和android （任何设备）但我在iOS上遇到chrome问题，我不确定为什么会这样，我可以看看hammer.js的例子，他们也可以在iPad上工作，所以我敢肯定我可能在做什么错了，所以这是我的HTML。

<div class="my-slidebox slidebox-container ng-isolate-scope" content-class="my-slidebox-content">
  <div class="slidebox" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
    <div ng-transclude="" class="slidebox-content" style="width: 2820px;">
    <!-- ngRepeat: product in vm.similarProducts --><div data-ng-repeat="product in vm.similarProducts" slidebox-items-ready="slidebox-items-ready" class="product ng-scope slidebox-item" style="width: 240px; margin: 20px;"><a href="#" class="thumbnail"><img data-ng-src="/spree/products/29/product/ror_ringer.jpeg?1404930806" src="/spree/products/29/product/ror_ringer.jpeg?1404930806"></a>
      <div class="caption text-left">
        <p class="brand-name ng-binding">Rails</p>
        <p class="product-name"><strong class="ng-binding">Ruby on Rails Ringer T-Shirt</strong></p>
        <p class="product-price ng-binding">$19.99</p>
      </div>
    </div><!-- end ngRepeat: product in vm.similarProducts --><div data-ng-repeat="product in vm.similarProducts" slidebox-items-ready="slidebox-items-ready" class="product ng-scope slidebox-item" style="width: 240px; margin: 20px;"><a href="#" class="thumbnail"><img data-ng-src="/spree/products/33/product/apache_baseball.png?1404930809" src="/spree/products/33/product/apache_baseball.png?1404930809"></a>
      <div class="caption text-left">
        <p class="brand-name ng-binding">Apache</p>
        <p class="product-name"><strong class="ng-binding">Apache Baseball Jersey</strong></p>
        <p class="product-price ng-binding">$19.99</p>
      </div>
    </div><!-- end ngRepeat: product in vm.similarProducts --><div data-ng-repeat="product in vm.similarProducts" slidebox-items-ready="slidebox-items-ready" class="product ng-scope slidebox-item" style="width: 240px; margin: 20px;"><a href="#" class="thumbnail"><img data-ng-src="/spree/products/41/product/spree_jersey.jpeg?1404930816" src="/spree/products/41/product/spree_jersey.jpeg?1404930816"></a>
      <div class="caption text-left">
        <p class="brand-name ng-binding">Spree</p>
        <p class="product-name"><strong class="ng-binding">Spree Baseball Jersey</strong></p>
        <p class="product-price ng-binding">$19.99</p>
      </div>
    </div><!-- end ngRepeat: product in vm.similarProducts -->
    <div class="right-fix ng-scope"></div>
  </div>
 </div>
</div>

这个标记用于水平列表，所以我有一个固定宽度的容器，然后另一个容器内部有一个巨大的宽度所以它可以滚动然后每个单独的元素里面，我不是不是用户使用水平滚动条，而不是每次用户滑动（移动）或点击按钮（桌面）时都不显示项目的“页面”，因此根据锤子文档，用法将是

var content = document.getElementsByClassName('slidebox')[0];
var hammer = Hammer(content, { touchAction: 'pan-y' });
hammer.on('swipeleft', function(){ alert('swipe left'); });
hammer.on('swiperight', function(){ alert('swipe right'); });

这在桌面和Chrome / android上都很好用，但在iPad上却不行，我不知道这个事件是否被儿童元素或其他东西捕获，我一直在处理这个问题一段时间没有运气，任何帮助赞赏。

锤子滑动事件不工作ios / chrome

0 个答案: