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);
});
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..
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.