Question

我遇到了这个奇怪的问题，我使用hammer.js库来创建一些响应表功能。

当我在iPhone上测试页面时（此问题不会在任何Android设备上发生，仅限iPhone），如果我从本地计算机上测试它，该功能可以正常工作 - 我＆＃39 ; m使用Ghostlab来测试本地计算机上的页面。但是，当我将代码部署到登台服务器时，功能会中断。我说休息的意思是它工作正常，但是在2个pan事件后它停止工作（pan事件是hammer.js事件）。 iPhone上的Chrome和Safair都存在此问题。

我还在我的手机上打开了Safari控制台，但我没有收到任何JS错误。我尝试将本地.js文件复制到登台服务器，但也没有解决问题。

有没有人有一个想法，为什么相同的代码不是在登台服务器上工作但是在本地服务器上呢？

Answer 1

我认为这是因为包含pan事件的元素被移出屏幕。

因此，不要在平移上添加回调函数，而是在left上设置.gallery-inner css值，如下所示：

<script>
var startPos = 0;
var scrollContainer = document.getElementById('scrollable');
var hammertime = new Hammer(scrollContainer);

hammertime.on('panend', function(ev) {
  startPos = parseInt(scrollContainer.style.left.replace('px', ''));
});

hammertime.on('pan', function(ev) {
  var pos = parseInt(startPos) + ev.deltaX;
  scrollContainer.style.left = pos + 'px';
});
</script>

<style>
.gallery {
  overflow: hidden;
  height: 200px;
  width: 300px;
  position: relative;
}
.gallery-inner {
  position: relative;
  white-space: nowrap;
  overflow: visible;
}
.gallery-inner > div {
  display: inline-block;
  width: 50px;
  height: 200px;
  background: #000;
  color: #fff;
}
</style>

<div class="gallery">
  <div id="scrollable" class="gallery-inner">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
  </div>
</div>

为触摸区域添加另一个容器，并在其上设置left值。

例如

<script>
  var startPos = 0;
var hammerContainer = document.getElementById('hammer');
var scrollContainer = document.getElementById('scrollable');
var hammertime = new Hammer(hammerContainer);

hammertime.on('panend', function(ev) {
  startPos = parseInt(scrollContainer.style.left.replace('px', ''));
});

hammertime.on('pan', function(ev) {
  var pos = parseInt(startPos) + ev.deltaX;
  scrollContainer.style.left = pos + 'px';
});
</script>

<style>
.gallery {
    overflow: hidden;
    height: 200px;
  width: 300px;
    position: relative;
}
.gallery-scrollable {
    position: relative;
    white-space: nowrap;
    overflow: visible;
}
.gallery-scrollable > div {
  display: inline-block;
  width: 50px;
  height: 200px;
  background: #000;
  color: #fff;
}
</style>

<div class="gallery">
  <div id="hammer" class="gallery-inner">
    <div id="scrollable" class="gallery-scrollable">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
      <div>13</div>
    </div>
  </div>
</div>

此处的代码示例：http://codepen.io/anon/pen/QbgLzz

一段时间后，Hammer.js停止工作

1 个答案: