欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQ的滚动条事件代码分析

程序员文章站 2022-04-28 21:34:03
jq滚动条事件 1、对内容区域滚动条滚动的监听:要放在内容加载的时候 $("#conten").on("scoll",functio...

jq滚动条事件

1、对内容区域滚动条滚动的监听:要放在内容加载的时候

$("#conten").on("scoll",function(){
 console.log("滚动了");
})

2、获取整个内容区域的滚动高度:

  $("#content").get(0).scrollheight

3、区域可见高度

$("#content").height()

4、当前滚动的地方的窗口顶端到整个内容顶端的距离:

  var scollh = $("#content").scrolltop();

5、让滚动条默认在最底下

$('#content').scrolltop( $('#content')[0].scrollheight );

附上其余获取各种高度的代码

在ie中:
document.body.clientwidth ==> body对象宽度
document.body.clientheight ==> body对象高度
document.documentelement.clientwidth ==> 可见区域宽度
document.documentelement.clientheight ==> 可见区域高度
在firefox中:
document.body.clientwidth ==> body对象宽度
document.body.clientheight ==> body对象高度
document.documentelement.clientwidth ==> 可见区域宽度
document.documentelement.clientheight ==> 可见区域高度

在opera中: 
document.body.clientwidth ==> 可见区域宽度
document.body.clientheight ==> 可见区域高度
document.documentelement.clientwidth ==> 页面对象宽度(即body对象宽度加上margin宽)
document.documentelement.clientheight ==> 页面对象高度(即body对象高度加上margin高)
而如果没有定义w3c的标准,则
ie为:
document.documentelement.clientwidth ==> 0
document.documentelement.clientheight ==> 0
firefox为:
document.documentelement.clientwidth ==> 页面对象宽度(即body对象宽度加上margin宽)document.documentelement.clientheight ==> 页面对象高度(即body对象高度加上margin高)
opera为:
document.documentelement.clientwidth ==> 页面对象宽度(即body对象宽度加上margin宽)document.documentelement.clientheight ==> 页面对象高度(即body对象高度加上margin高)





网页可见区域宽:
document.body.clientwidth

网页可见区域高:
document.body.clientheight 

网页可见区域宽:
document.body.offsetwidth(包括边线的宽) 

网页可见区域高:
document.body.offsetheight(包括边线的宽) 

网页正文全文宽:
document.body.scrollwidth 

网页正文全文高:
document.body.scrollheight 

网页被卷去的高:
document.body.scrolltop 

网页被卷去的左:
document.body.scrollleft 

网页正文部分上:
window.screentop 

网页正文部分左:
window.screenleft 

屏幕分辨率的高:
window.screen.height 

屏幕分辨率的宽:
window.screen.width 

屏幕可用工作区高度:
window.screen.availheight 

屏幕可用工作区宽度:
window.screen.availwidth