js里确定滚动事件方向的应用判断

作者：天空2019.12.09来源：Web前端之家浏览：9234评论:0

关键词：js scroll

在jQuery中可以使用scrollTop()方法来确定滚动事件的方向，scrollTop()方法用于设置或返回所选元素的垂直滚动条位置。利用这种方法，我们就可以确定滚动方向。

语法：

$(selector).scrollTop(position)

参数：此方法接受单个参数position，该position参数是可选的。它用于指定垂直滚动条位置（以像素为单位）。

返回值：返回所选元素滚动条的垂直位置。

示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
		html,body {
			height: 300%
		}
		div {
			position: fixed;
			padding-left: 10px;
			padding-top: 30px;
			height: 10%;
			width: 35%;
			font-weight: bold;
			border: 2px solid red;
		}
	</style>
</head>

<body>

	<div></div>

	<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
	<script>
		var position = $(window).scrollTop();

		$(window).scroll(function() {
			var scroll = $(window).scrollTop();
			if(scroll > position) {
				console.log('scrollDown');
				$('div').text('向下滚动');
			} else {
				console.log('scrollUp');
				$('div').text('向上滚动');
			}
			position = scroll;
		});
	</script>
</body>

</html>

赏您的支持是我们创作的动力！