Rumah >hujung hadapan web >tutorial js >jquery怎样才能确定滚动事件的方向
jquery怎样才能确定滚动事件的方向
- coldplay.xixiasal
- 2020-11-23 10:06:042085semak imbas
jquery确定滚动事件方向的方法：使用【scrollTop()】方法设置或返回被选元素的垂直滚动条位置，语法为【$(selector).scrollTop(position)】。
本教程操作环境：windows7系统、jquery3.2.1版，该方法适用于所有品牌电脑。
jquery确定滚动事件方向的方法：
在jQuery中可以使用scrollTop()方法来确定滚动事件的方向，scrollTop()方法用于设置或返回所选元素的垂直滚动条位置。利用这种方法，我们就可以确定滚动方向。
<strong>jQuery scrollTop()</strong>方法
scrollTop() 方法设置或返回被选元素的垂直滚动条位置。
提示：当滚动条位于最顶部时，位置是 0。
语法：
$(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>相关免费学习推荐：JavaScript（视频）
Atas ialah kandungan terperinci jquery怎样才能确定滚动事件的方向. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何判断一个对象是否为jquery的对象Artikel seterusnya：vue.js为什么要用谷歌浏览器