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

你可能感兴趣的:(js获取浏览器及屏幕高度和宽度等信息的方法和onscroll事件)