gpt4 book ai didi

滚动元素上的 Javascript touchmove 事件

转载 作者:行者123 更新时间:2023-12-03 16:26:29 25 4
gpt4 key购买 nike

所以,我在让元素在 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 移动 View 对他们的游戏产品图片所做的那样?

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

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

谢谢你..

最佳答案

你只需要使用鼠标滚轮 js

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

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

这是一个例子:demo

关于滚动元素上的 Javascript touchmove 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34284554/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com