在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>
网友评论文明上网理性发言 已有0人参与
发表评论: