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