滚动元素上的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事件

回答

相关问题