gpt4 book ai didi

javascript - 如何检测浏览器窗口是否有滚动条?

转载 作者:数据小太阳 更新时间:2023-10-29 05:13:38 28 4
gpt4 key购买 nike

我需要能够检测浏览器窗口上是否有滚动条(垂直和水平)。我一直在使用这段代码,但它在 Firefox 5 中无法可靠地工作。

JFL.GetScrollbarState = function () {
var myWidth = 0;
var myHeight = 0;
if (document.documentElement && document.documentElement.clientWidth) {
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else {
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return ({
vScrollbar: document.body.scrollHeight > myHeight,
hScrollbar: document.body.scrollWidth > myWidth
});
}

有没有更好的方法可以跨浏览器工作。我的浏览器目标是 Firefox 4-5、Chrome、Safari 4+、Opera 10+。

如果您对为什么我需要知道是否有滚动条感兴趣,那是因为我有一些旋转的 CSS3 过渡(由于它们旋转的性质)可能会暂时超出当前文档大小的边缘(因此使文档暂时变大)。如果最初不存在滚动条,则 CSS3 过渡可能会导致滚动条在过渡期间出现,然后在过渡完成时消失,从而导致丑陋的滚动条闪烁。如果我知道不存在滚动条,我可以临时添加一个类,将 overflow-x 或 overflow-y 设置为隐藏,从而防止滚动条在 CSS3 转换期间闪烁。如果滚动条已经存在,我不需要做任何事情,因为它们可能会移动一点,但它们不会在过渡期间打开/关闭。

如果一个人不仅可以真正判断通常是否需要滚动条,还可以判断滚动条是否真的存在,则加分。

最佳答案

David 提出的滚动版本在某些浏览器(Safari 和 IE)中遇到闪烁问题后,我确定了这段不存在闪烁问题的代码:

function getScrollBarState() {
var result = {vScrollbar: true, hScrollbar: true};
try {
var root = document.compatMode=='BackCompat'? document.body : document.documentElement;
result.vScrollbar = root.scrollHeight > root.clientHeight;
result.hScrollbar = root.scrollWidth > root.clientWidth;
} catch(e) {}
return(result);
}

它是我使用的衍生产品,并且在 fanfavorite 发布的帖子中引用了一般技术。它似乎适用于我尝试过的所有浏览器,甚至在 IE6 中也是如此。出于我的目的,我希望任何失败都返回有滚动条,所以我以这种方式对失败条件进行了编码。

注意:此代码不会检测滚动条是否已通过 CSS 强制打开或关闭。此代码检测是否需要自动滚动条。如果您的页面可能具有控制滚动条的 CSS 设置,那么您可以先获取 CSS 并进行检查。

关于javascript - 如何检测浏览器窗口是否有滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6605367/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com