判断页面滑动滚动方向（上，下，左，右）

最新推荐文章于 2023-06-09 13:07:17 发布

转载最新推荐文章于 2023-06-09 13:07:17 发布 · 3.7k 阅读

文章标签：

#touch事件判断滑动方向 #onscroll

Web 专栏收录该内容

48 篇文章

订阅专栏

博客介绍了两种判断滑动方向的方法。一是通过手指触摸事件touch判断，给出了代码及推荐地址；二是通过window.onscroll滚动实现并给出代码。还给出使用建议，pc端建议用方法二，触屏H5判断多方向建议用方法一。

1.通过手指触摸事件touch判断（转载：https://blog.youkuaiyun.com/nobug12138/article/details/70157662）

1.1代码

/*判断上下滑动：*/
var startX,startY,endX,endY,distanceX,distanceY;
$('body').bind('touchstart', function(e) {
	startX = e.originalEvent.changedTouches[0].pageX;
	startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").bind("touchmove", function(e) {
	//获取滑动屏幕时的X,Y
	endX = e.originalEvent.changedTouches[0].pageX;
	endY = e.originalEvent.changedTouches[0].pageY;
	//获取滑动距离
	distanceX = endX - startX;
	distanceY = endY - startY;
	//判断滑动方向
	if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) {
		console.log('往右滑动');
	} else if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX < 0) {
		console.log('往左滑动');
	} else if(Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
		console.log('往上滑动');
		$(".div_fixed").show();
	} else if(Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 0) {
		console.log('往下滑动');
		$(".div_fixed").hide();		
	}
});

2.方法二通过滚window.onscroll动实现

2.1代码

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>实现页面滚动方向检测</title>
		<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
		<style type="text/css"> *{ margin: 0; padding: 0; } .nav{ height: 60; position:fixed; top:0; left:0; width: 100%; height: 60px; line-height: 60px; text-align: center; font-size: 20px; background-color:gray; color: #fff; } .up{ background-color: orange; } .down{ background-color: blue; } </style>
	</head>
	<body style="height: 6000px;">
		<div class="nav">start</div>
		<div class="result"></div>

		<script>
			var $nav = $('.nav');
			var $result = $('.result');
			window.onscroll = function(e) {
				$result.html('swipeDown');
				scrollFunc();
				console.log(scrollDirection)
				if(scrollDirection == 'down') {
					$nav.html('down');
					$nav.addClass("down").removeClass("up");
				} else if(scrollDirection == 'up') {
					$nav.html('up');
					$nav.addClass("up").removeClass("down");
				}
			}
			var scrollAction = { x: 'undefined', y: 'undefined' },
				scrollDirection;
			function scrollFunc() {
				if(typeof scrollAction.x == 'undefined') {
					scrollAction.x = window.pageXOffset;
					scrollAction.y = window.pageYOffset;
				}
				var diffX = scrollAction.x - window.pageXOffset;
				var diffY = scrollAction.y - window.pageYOffset;
				if(diffX < 0) {
					// Scroll right
					scrollDirection = 'right';
				} else if(diffX > 0) {
					// Scroll left
					scrollDirection = 'left';
				} else if(diffY < 0) {
					// Scroll down
					scrollDirection = 'down';
				} else if(diffY > 0) {
					// Scroll up
					scrollDirection = 'up';
				} else {
					// First scroll event
				}
				scrollAction.x = window.pageXOffset;
				scrollAction.y = window.pageYOffset;
			}
		</script>
	</body>
</html>

3.说明

如果在pc端建议使用方法二；如果在触屏H5需要判断多个方向建议使用方法一；