js获取浏览器及屏幕高度和宽度等信息的方法和onscroll事件

一、方法如下：

网页可见区域宽： 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

二、onscroll事件

onscroll事件

•是页面滚动条滚动事件，当页面滚动条滚动时候，自动触发

•如果页面没有滚动条或者没有发生滚动操作，则不会执行onscroll事件

•从属于window对象，事件应绑定到window对象上

scrollTop和scrollLeft
•当页面内容区域超出了浏览器展示范围，页面会出现滚动条
•scrollTop指的是向上滚动头部高度
•scrollLeft指的是向左滚动的宽度
•注意：兼容性不好，不同浏览器的scrollTop/scrollLeft属性从属对象不一
•chrom浏览器：从属于body对象上
•火狐浏览器：从属于documentElement对象上
•ie9+浏览器、chrom、firefox：window.pageXOffset和window.pageYOffset
兼容写法：
document.body.scrollTop||document.documentElement.scrollTop||window.pageYOffset||0

document.body.scrollLeft||document.documentElement.scrollLeft||window.pageXOffset||0
 

转载于:https://my.oschina.net/u/3939041/blog/2249207