JavaScript原生仿移动设备滑动事件

最新推荐文章于 2023-09-13 11:28:33 发布

原创最新推荐文章于 2023-09-13 11:28:33 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

73 篇文章

订阅专栏

该博客围绕JavaScript原生移动设备滑动事件展开，虽无具体内容，但可知聚焦于利用JavaScript处理移动设备上的滑动操作，在前端开发中，这有助于实现更流畅的交互体验，是前端开发中重要的技术点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function arrowEvent() {
	var left = document.getElementById("leftArrow");
	var right = document.getElementById("rightArrow");
	taskBox = document.getElementById("taskBox");
	nowScroll = taskBox.scrollLeft;
	left.onclick = function() {
		scrollAnimate("left",2,nowScroll);
	}
	right.onclick = function() {
		scrollAnimate("right",-2,0);
	}
}
function scrollAnimate(obj,changePX,number){
	nowNum = 0;
	clearInterval(timer);
	timer = setInterval(function() {
		// 循环一次+1
		nowNum += 1;
		// 每次更改两个像素
		taskBox.scrollLeft = nowScroll-changePX;
		// 判断是否达到要求
		if (nowNum == 100 || taskBox.scrollLeft == number) {
			clearInterval(timer);
		}
		// 更新当前滚动位置
		nowScroll = taskBox.scrollLeft;
	}, 1);
}