滾動監聽語句：

1、當前滾動的地方的窗口頂端到整個頁面頂端的距離：

var winPos = $(window).scrollTop();

2、獲取指定元素的頁面位置：? ? ?

$(val).offset().top;

3、對頁面滾動條滾動的監聽：要放在頁面加載的時候

$(window).scroll(function(event){});

4、設置滾動條到指定位置。

$(window).scrollTop(offset)。

5、獲取水平滾動條的距離

$(document).scrollLeft();

6、獲取整個頁面高度

$(document).height();

7、獲取當前瀏覽器，也就是你的瀏覽器所看到的頁面部分的高度，會隨著頁面放縮改變

$(window).height();

?

$(window).height()代表了當前可見區域的大小，而$(document).height()則代表了整個文檔的高度，可視具體情況使用.

注意當瀏覽器窗口大小改變時(如最大化或拉大窗口后) $(window).height() 隨之改變，但是$(document).height()是不變的。

$(function (){ /*滾動監聽 獲取滾動條距頁面頂端距離*/$(window).scroll(function(){ /*定義滾動條距頂端距離*/var ww=$(document).scrollTop(); /*根據距離判斷，改變樣式*/if(ww < 1200 && ww>0 ){ $("#mm1").css("background","#108EE9");$("#mm1").children('.j_p').css("color","#FFF");$("#mm1").find('span').css("color","#FFF");$("#mm2").css("background","#FFF");$("#mm2").children('.j_p').css("color","#108EE9");$("#mm2").find('span').css("color","#108EE9");}else if(ww<2000 && ww>=1200 ){$("#mm1").css("background","#FFF");$("#mm1").children('.j_p').css("color","#108EE9");$("#mm1").find('span').css("color","#108EE9"); $("#mm2").css("background","#108EE9");$("#mm2").children('.j_p').css("color","#FFF");$("#mm2").find('span').css("color","#FFF");}});

錨點定位：

用a標簽，href=“#id”,鏈接要定位的id屬性

<a href="#id"> <div>跳轉</div> </a>

　　

鼠標滾輪：mousewheel

這個事件在標準下和IE下是有區別的。

firefox是按標準實現的,事件名為"DOMMouseScroll?",IE下采用的則是"mousewheel?"。

當然一行代碼就解決了兼容問題?
var mousewheel = document.all?"mousewheel":"DOMMouseScroll"; 事件屬性，IE是event.wheelDelta，Firefox是event.detail?屬性的方向值也不一樣， IE向上滾 > 0，Firefox向下滾 > 0。 使用mousewheel事件有以下兩種方式： 使用mousewheel和unmousewheel事件函數； 使用經典的bind和unbind函數。 $('div.mousewheel_example').mousewheel(fn); $('div.mousewheel_example').bind('mousewheel', fn); mousewheel事件的處理函數有一點小小的變化，它除了第一個參數event外，還接收到第二個參數delta。通過參數delta可以獲取鼠標滾輪的方向和速度。 如果delta的值是負的，那么滾輪就是向下滾動，正的就是向上。 // 綁定方式 $('#my_elem').bind('mousewheel', function(event, delta) { console.log(delta); }); // 事件函數方式 $('#my_elem').mousewheel(function(event, delta) { console.log(delta); });

?

轉載于:https://www.cnblogs.com/dk2557/p/9274315.html

總結

以上是生活随笔為你收集整理的js滚动监听的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。