js操作滾動條事件例項
阿新 • • 發佈：2019-01-09
本文例項講述了js操作滾動條事件的方法。分享給大家供大家參考。具體分析如下：
之前一直很納悶，如何監視滾動條的事件，今天終於有點明白了。
下邊程式碼，是監聽滾動條只要移動，下方的返回頂部的div顯示與隱藏的程式碼
| 1 2 3 4 5 6 7 8 |
window.onscroll
= function
() {
var
t = document.documentElement.scrollTop || document.body.scrollTop;
if
(t > 0) {
$(".cbbfixed").css("bottom",
"10px");
}
else
{
$(".cbbfixed").css("bottom",
"-85px");
}
}
|
注：
t：滾動條距離top端的距離
t>0,即滾動條一旦滾動，立即執行if（）語句，else（）中的程式碼是，滾動條到到top處時，返回頂部的div隱藏
返回頂部按鈕的點選操作：
| 1 2 3 4 |
$("#cgotop").click(function(){
$('body,html').animate({
scrollTop: 0 }, 100);
//
document.body.scrollTop = 0;return
false;
});
|
補充：
1、監聽某個元素的滾動條事件
| 1 |
$(selector).scroll(function(){.......});
|
2.獲取滾動條滾動的距離
| 1 2 |
$(selector).scrollTop();
$(selector).scrollLefft();
|
PS：這裡再為大家推薦一款關於JS事件的線上查詢工具，歸納總結了JS常用的事件型別與函式功能：
javascript事件與功能說明大全：
希望本文所述對大家的javascript程式設計有所幫助。