如何检测浏览器窗口上是否有滚动条?
How do I detect if there are scrollbars on a browser window?
我需要能够检测浏览器窗口上是否有滚动条(垂直和水平)。我一直在使用这段代码,但它在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)在HTML iFrame?
这其实很简单。这将在所有现代浏览器中工作:
// try scrolling by 1 both vertically and horizontally
window.scrollTo(1,1);
// did we move vertically?
if (window.pageYOffset != 0) {
console.log("houston, we have vertical scrollbars");
}
// did we move horizontally?
if (window.pageXOffset != 0) {
console.log("houston, we have horizontal scrollbars");
}
// reset window to default scroll state
window.scrollTo(0,0);
- 如何查明鼠标按下事件是否发生在滚动条上或元素中的其他任何位置
- 如何检测用户是否移动了滚动条
- 是否可以将滚动条系在一起
- jqueryangularjs如何知道鼠标按下事件是否是由浏览器的滚动条触发的
- 是否有任何跨浏览器方法可以获取带有滚动条的 DIV 宽度(如果存在)
- 我如何判断滚动条是否已到达帖子内容的末尾
- 是否可以在IE中实现WebKit滚动条效果
- 检测 DIV 是否有滚动条
- 如何在 Firefox 上使用 Selenium IDE 来测试是否存在滚动条
- 有没有办法找到浏览器弹出窗口是否使用 window.open 打开了参数“滚动条=是”
- 检查滚动条是否仍被用户抓取
- 检查滚动条当前是否在底部-无jQuery
- NVD3 是否有将滚动条添加到 NVD3 图表的现有方法
- 是否可以使实体.css模式更大并删除垂直滚动条
- 如何检查用户是否抓取了网站上的滚动条
- 是否可以使特定元素不在其中引起滚动条'的父级
- 如何在JQuery中收集有关滚动条的信息,特别是它是否被拖动
- location.reload()是否保持当前滚动条的位置
- 是否有任何方法来控制使用JavaScript滚动条
- 如何检测是否有水平滚动条