失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 原生js--兼容获取窗口滚动条位置和窗口大小的方法

原生js--兼容获取窗口滚动条位置和窗口大小的方法

时间:2020-01-25 03:10:42

相关推荐

原生js--兼容获取窗口滚动条位置和窗口大小的方法

各个浏览器对获取获取窗口滚动条位置和窗口大小没有提供统一的API,以下是对其封装,解决兼容性问题

/**

* 获取浏览器视口的大小(显示文档的部分)

*

*/

function getViewPortSize(){

// 除IE8及更早的版本以外的浏览器

if( window.innerWidth != null ){

return {

w : window.innerWidth,

h : window.innerHeight

}

}

// 标准模式下的IE

if( patMode == "css1Compat" ){

return {

w : document.documentElement.clientWidth,

h : document.documentElement.clientHeight

}

}

// 怪异模式下的浏览器

return {

w : document.body.clientWidth,

h : document.body.clientHeight

}

}

/**

* 获取窗口滚动条的位置

*/

function getScrollOffset(){

// 除IE8及更早版本

if( window.pageXOffset != null ){

return {

x : window.pageXOffset,

y : window.pageYOffset

}

}

// 标准模式下的IE

if( patMode == "css1Compat" ){

return {

x : document.documentElement.scrollLeft,

y : document.documentElement.scrollTop

}

}

// 怪异模式下的浏览器

return {

x : document.body.scrollLeft,

y : document.body.scrollTop

}

}

如果觉得《原生js--兼容获取窗口滚动条位置和窗口大小的方法》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。