滚动元素上的Javascript touchmove事件答案

【问题标题】：Javascript touchmove event on scroll element滚动元素上的Javascript touchmove事件
【发布时间】：2015-12-15 17:26:40
【问题描述】：

所以，我有一个关于让元素在 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 元素而不是滚动条，它就会移动。

谢谢你..

【问题讨论】：

它正在 touchmove....
是的，如果你点击/触摸滚动条，它就会继续前进。但不在 UL 元素上。
touchmove 事件适用于触控移动设备。您不能“触摸”移动设备的滚动条。更好地解释您的需求。
我正在使用 firefox touch view 开发者工具。我已经检查了控制台日志。它显示“触发”但不将 UL 元素移动到正确的方向

标签： javascript

【解决方案1】：

你只需要使用鼠标滚轮js

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

“20”代表速度。 preventDefault 确保页面不会向下滚动。也适用于触摸设备。触摸滚动。

这里是一个例子：demo

【讨论】：

感谢 joashp 回答我的问题。实际上这不是我想的，你想看看我的小提琴吗？我刚刚编辑了它。
@ChingChing 是一样的。你能更好地解释你想要达到的目标吗？这是像 play.google.com 应用截图视图 zackgrossbart.com/hackito/touchslider 这样的滑块
正是 joashp！这就是我想要建立的。我在这段代码上挣扎。基本上它已经在移动了。但如果我再次触摸它会回到第一点。为什么会这样？