当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JQ的滚动条事件代码分析

JQ的滚动条事件代码分析

2019年01月13日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网