Javascript touchmove event on scroll element

Question

so, I have a problem about getting element to moving on touchmove event.

this is my code :

<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

how to make this things move on touchmove event?

just like play.google.com mobile view do on their game product images?

i know it's moving if i click/touch on scrollbar, what i supposed to do here,

it's moving if i touch and move on UL element not the scrollbar.

thanks you..

Answer 1

You just have to use the mousewheel js

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

The "20" represents speed. preventDefault ensures the page won't scroll down. Works on touch devices as well. Touch to scroll.

Here is an example: demo