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(影片)
以上是jquery怎麼能決定滾動事件的方向的詳細內容。更多資訊請關注PHP中文網其他相關文章!