js和jquery實現頁面滾動監聽
一、總結
一句話總結：onscroll方法和監聽頁面元素的高度都可以實現滾動監聽。
1、onscroll方法實現滾動監聽的核心代碼是什么？
<body onscroll="scroll()">
2、通過檢測元素的高度實現滾動監聽？
//遍歷樓層
jumbotron.each(function() {
var $this = $(this),
jumbotronTop =$this.offset().top;//獲取當前樓層的高度
if (top > (jumbotronTop - 200)) {
currentID = "#" + $this.attr("id");//每個小於top的樓層都會賦值一次，逐層覆蓋替換，最后一層才是最后的id值
}
else {
return false;
};
})
二、onscroll方法實現滾動監聽
js監聽html頁面的上下滾動事件
最近在一個項目中，在寫前端頁面的時候，想像以前做Android時在頁面時刻監聽上下滾動的事件，查找資料發現由鼠標或類似用戶動作觸發的事件有以下圖示：
不多說了，直接上代碼了，經過測試可以使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Dome</title>
<script type="text/javascript"> function scroll(){ //console.log("打印log日志");實時看下效果 console.log("開始滾動！"); } var scrollFunc = function (e) { e = e || window.event; if (e.wheelDelta) { //第一步：先判斷瀏覽器IE，谷歌滑輪事件 if (e.wheelDelta > 0) { //當滑輪向上滾動時 console.log("滑輪向上滾動"); } if (e.wheelDelta < 0) { //當滑輪向下滾動時 console.log("滑輪向下滾動"); } } else if (e.detail) { //Firefox滑輪事件 if (e.detail> 0) { //當滑輪向上滾動時 console.log("滑輪向上滾動"); } if (e.detail< 0) { //當滑輪向下滾動時 console.log("滑輪向下滾動"); } } } //給頁面綁定滑輪滾動事件 if (document.addEventListener) {//firefox document.addEventListener('DOMMouseScroll', scrollFunc, false); } //滾動滑輪觸發scrollFunc方法 //ie 谷歌 window.onmousewheel = document.onmousewheel = scrollFunc; </script>
</head>
<body onscroll="scroll()">
<div style="height: 2000px;background-color: aqua;"></div>
</body>
</html>
如果有沒有使用過console.log(“”)的，我這里截下圖看下吧（谷歌瀏覽器）：
三、通過檢測元素的高度實現滾動監聽
jQuery實現滾動監聽
1.設計思路
1）獲取窗口滾動高度；
2）獲取附加導航欄；
3）獲取導航欄下的所有li；
4）通過相同class獲取所有監聽元素；（此例中為jumbotron巨幕）
5）遍歷所有監聽元素，若當前元素距離文檔高度小於文檔滾動條的垂直偏移量（即滾動高度），獲取當前元素ID。（此處獲取的ID值，實際為ID值覆蓋替換，因為存在有多個元素的e當前元素距離文檔高度小於文檔滾動條的垂直偏移量的情況，但只有最后的ID是有效值，因
為前邊的會被后邊的覆覆蓋替換掉）
6）給對應的導航添加class（bootstrap中為給li添加active），先移出已有的active，然后再添加。
實現代碼
$(document).ready(function() {
//定義全局變量，獲取附加導航欄、導航列表、鏈接、各樓層、各樓層距離文檔的高度
var menu = $("#add-nav"),
lists = menu.find("li"),
jumbotron = $(".jumbotron"),
currentID;
$(window).scroll(function() {
//獲取文檔滾動高度
var top = $(document).scrollTop();
//遍歷樓層
jumbotron.each(function() {
var $this = $(this),
jumbotronTop =$this.offset().top;//獲取當前樓層的高度
if (top > (jumbotronTop - 200)) {
currentID = "#" + $this.attr("id");//每個小於top的樓層都會賦值一次，逐層覆蓋替換，最后一層才是最后的id值
}
else {
return false;
};
})
//給相應樓層對應的附加到導航添加class
//首先清除所有active
var currentActive = menu.find(".active");
if (currentID && currentActive.find("a:eq(0)").attr("href") != currentID) {
currentActive.removeClass("active");
//給相應導航添加class
menu.find("[href="+currentID+"]").parent().addClass("active");
}
})
});用到的方法有：scroll()、scrollTop()、offset()、attr()、addClass()、removeClass()、find()、each()、parent()
其中重點說明：.offset()內容相對於文檔的偏移（不是瀏覽器窗口），所以可以理解為固定值；