我需要能够检测浏览器窗口上是否有滚动条(垂直和水平).我一直在使用这段代码,但它在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设置为hidden,从而防止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并首先检查它.
