摘要:1、对内容区域滚动条滚动的监听:要放在内容加载的时候2、获取整个内容区域的滚动高度:

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-JQ的滚动条事件代码分析

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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 

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 

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-JQ的滚动条事件代码分析

全部内容,希望文章能够帮你解决

js实例教程-JQ的滚动条事件代码分析

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过