scrollTOP scrollLeft clientHeight clientWidth 的各浏览器版修正

网页滚动与视口尺寸获取

最新推荐文章于 2025-02-09 14:33:22 发布

原创最新推荐文章于 2025-02-09 14:33:22 发布 · 9.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种通过JavaScript获取网页的滚动位置及浏览器视口尺寸的方法。具体包括水平和垂直滚动条的位置(bodySL, bodyST)以及视口的宽度(bodyCW)和高度(bodyCH)。这些代码适用于不同浏览器环境。

var bodySL, bodyST;
if(window.pageXOffset)
{
    bodySL=window.pageXOffset;
}
else if(document.documentElement&&document.documentElement.scrollLeft)
{
    bodySL=document.documentElement.scrollLeft;
}
else if(document.body)
{
    bodySL=document.body.scrollLeft; //author: meizz
}

if(window.pageYOffset)
{
    bodyST=window.pageYOffset;
}
else if(document.documentElement&&document.documentElement.scrollTop)
{
    bodyST=document.documentElement.scrollTop;
}
else if(document.body)
{
    bodyST=document.body.scrollTop;
}

var bodyCW, bodyCH;
if(window.innerWidth)
{
    bodyCW=window.innerWidth;
}
else if(document.documentElement&&document.documentElement.clientWidth)
{
    bodyCW=document.documentElement.clientWidth;
}
else if(document.body)
{
    bodyCW=document.body.clientWidth; //author: meizz
}

if(window.innerHeight)
{
    bodyCH=window.innerHeight;
}
else if(document.documentElement&&document.documentElement.clientHeight)
{
    bodyCH=document.documentElement.clientHeight;
}
else if(document.body)
{
    bodyCH=document.body.clientHeight;
}