隐藏/显示DIV如果一个div有滚动条
我已经有一个内嵌的高度设置为浏览器窗口的100%高度的div:隐藏/显示DIV如果一个div有滚动条
element.style {
height: 400px;
}
#scrollable-div {
overflow-x: hidden;
overflow-y: scroll;
position: relative;
width: 270px;
}
随着JS或jQuery的,我想确定该div是否有滚动条,如果是,隐藏/显示不同的div。有什么想法吗?
您可以使用此功能,要知道如果元素具有滚动条:
$(document).ready(function() {
var mydiv = $('#scrollable-div');
console.log(mydiv1[0].scrollHeight);
console.log(mydiv1.height());
if (mydiv1[0].scrollHeight > mydiv1.height()) {
console.log(1);
//Has scrollbar
}
else {
console.log(2);
//Dont has scrollbar
}
});
我建议具有包含的内容,是内scrollable-div
另一个DIV。这将有助于跟踪内容的高度,以便您执行逻辑。
if ($('#scrollable-inner').height() > $('#scrollable-div').height())
$('#dependent-div').hide();
else
$('#dependent-div').show();
查看完整的代码在这个jsFiddle &演示。
当我尝试这个,我的价值观都是一样的。我的外部div具有内联高度设置,并且内部div必须设置为100%以允许滚动...因此它们最终都是相同的。 – 2012-03-26 13:39:25
这是因为你明确地设置了内部div来匹配它的父级的高度。内部div的要点是只跟踪内容的高度(最好别无其他),因此要确定它的高度是关键。如果你从内部div中删除'height:100%;'它会起作用吗? – 2012-03-26 14:48:46
这可能会帮助你http://*.com/questions/681087/how-can-i-detect-a-scrollbar-presence-using-javascript-in-html-iframe – 2012-03-26 12:41:08
我相信这个例子只是检测如果整个页面有一个滚动条,而不是一个单独的分区... – 2012-03-26 12:43:56
是的我知道,我只是觉得它可能是有用的,可以修改=) – 2012-03-26 12:53:32