滚动元素上的Javascript touchmove事件

时间:2015-12-15 08:46:21

标签: 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元素而不是滚动条,它就会移动。

谢谢你..

1 个答案:

答案 0 :(得分:0)

您只需使用鼠标滚轮js

constructor() {
   super();
   this.handleSearch = _.throttle(this.handleSearch,1000);
}

shouldComponentUpdate() {
    return false;
}

&#34; 20&#34;代表速度。 preventDefault确保页面不会向下滚动。 也适用于触摸设备。触摸即可滚动。

以下是一个示例:demo