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

Question

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

当我在我的iPhone上测试页面时（这个问题在任何Android设备上都没有发生，仅限于iPhone），如果我从本地机器测试它，则功能正常工作 - 我正在使用Ghostlab从本地机器测试页面。但是，当我将代码部署到登台服务器时，功能会中断。我的意思是休息时间表示它可以正常工作，但在2次平移事件之后停止工作（平移事件是hammer.js事件）。 Chrome和iPhone上的Safair都存在此问题。

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

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

Answer 1

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

因此而不是添加上泛的回调函数来设置.gallery-inner像下面的left 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