滾動元素上的Javascript touchmove事件

所以，我有一個關於讓元素在touchmove事件上移動的問題。滾動元素上的Javascript touchmove事件

這是我的代碼：

<ul> 
    <li>this is long Text</li> 
    <li>this is long Text</li> 
    <li>this is long Text</li> 
    <li>this is long Text</li> 
</ul> 

ul {list-style:none; overflow-y:scroll; white-space:nowrap; } 
ul li {display:inline-block; width:600px; margin-right:10px; } 

document.getElementsByTagName("ul")[0].addEventListener("touchmove", function(e) { 
     var touch = e.touches[0] || e.changedTouches[0]; 
      var elm = this.offsetLeft; 
      var x = touch.pageX - elm; 

      this.scrollLeft = x; 
       console.log(x); 

});

this is how it look

如何使這個事情上touchmove事件動？

就像play.google.com手機視圖做他們的遊戲產品圖像？

我知道如果我點擊/觸摸滾動條，我認爲在這裏做它的移動，

如果我撫摸和UL元素不是滾動條上移動它的移動。

謝謝你..

來源

2015-12-15 Ching Ching

它是touchmove移動.... – Rayon

沒錯這就是移動上如果u點擊/觸摸上滾動條。但不在UL元素上。 –

'touchmove'事件用於觸摸移動設備。您無法在移動設備的滾動條中「觸摸」。更好地解釋你需要什麼。 –

您只需要使用鼠標滾輪JS

$('ul').mousewheel(function(event, delta) { 
    this.scrollLeft -= (delta * 20); 
    event.preventDefault(); 
});

的「20」代表速度。 preventDefault確保頁面不會向下滾動。也適用於觸控設備。觸摸滾動。

下面是一個例子：demo

來源

2015-12-15 09:21:39 joashp

感謝joashp回答我的問題。其實這不是我想要的，你想看看我的小提琴嗎？我剛剛編輯它。 –

@ChingChing它的同樣的事情。你能更好地解釋你想達到的目標嗎？這裏是像play.google.com應用程序截圖視圖http://www.zackgrossbart.com/hackito/touchslider/ – joashp

正是joashp！這就是我想要建立的。我在這個代碼上掙扎。基本上它已經在移動。但如果我再次觸摸它會回到第一點。爲什麼發生這種情況？ –

滾動元素上的Javascript touchmove事件

回答

相關問題