滚动元素上的Javascript触摸移动事件

Javascript touchmove event on scroll element

本文关键字：触摸 移动 事件 Javascript 元素 滚动      更新时间：2023-09-26

所以，我在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);
});

就是这样

如何让这些东西在touchmove事件中移动？

就像play.google.com手机视图对其游戏产品图像的处理一样？

如果我点击/触摸滚动条，我知道它在移动，我应该在这里做什么，

如果我触摸并移动UL元素而不是滚动条，它就会移动。

谢谢你。。

您只需要使用鼠标滚轮js

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

"20"表示速度。preventDefault确保页面不会向下滚动。也适用于触摸设备。触按可滚动。

这里有一个例子：演示

相关文章：