×

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

作者:天空2019.12.09来源:Web前端之家浏览:8742评论:0
关键词:jsscroll

在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>

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js82398429038409.html

网友评论文明上网理性发言 已有0人参与

发表评论: