jQuery可以輕松地獲取頁(yè)面中鼠標(biāo)滾動(dòng)的值。在頁(yè)面中,有時(shí)會(huì)出現(xiàn)需要獲取用戶滾動(dòng)信息的場(chǎng)景,比如在滾動(dòng)條到達(dá)底部時(shí),自動(dòng)加載下一頁(yè)內(nèi)容。
要獲取鼠標(biāo)滾動(dòng)值,首先需要綁定一個(gè)scroll事件:
$(window).scroll(function() { // 獲取鼠標(biāo)滾動(dòng)值的代碼 });
在scroll事件里面,可以使用jQuery中的scrollTop()方法來(lái)獲取當(dāng)前鼠標(biāo)滾動(dòng)的位置:
$(window).scroll(function() { var scrollValue = $(this).scrollTop(); console.log(scrollValue); // 輸出鼠標(biāo)滾動(dòng)值 });
其中,this代表當(dāng)前觸發(fā)事件的元素,即瀏覽器窗口。scrollTop()方法返回窗口頂部距離頁(yè)面頂部的距離,即鼠標(biāo)滾動(dòng)了多少像素。
在獲取了鼠標(biāo)滾動(dòng)值之后,就可以進(jìn)行相應(yīng)的操作了。比如,判斷滾動(dòng)條是否到達(dá)底部:
$(window).scroll(function() { var scrollValue = $(this).scrollTop(); var windowHeight = $(this).height(); // 獲取窗口高度 var documentHeight = $(document).height(); // 獲取頁(yè)面高度 if (scrollValue == documentHeight - windowHeight) { // 到達(dá)底部,執(zhí)行相應(yīng)操作 } });
通過(guò)判斷scrollValue是否等于documentHeight減去windowHeight,就可以判斷滾動(dòng)條是否到達(dá)底部。在到達(dá)底部時(shí),可以執(zhí)行相應(yīng)的操作,例如加載下一頁(yè)內(nèi)容。