隐藏/显示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。有什么想法吗？

来源

2012-03-26 Joel Eckroth

这可能会帮助你http://stackoverflow.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

您可以使用此功能，要知道如果元素具有滚动条：

$(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 
    } 
});

来源

2012-03-26 12:48:40 MCSI

我建议具有包含的内容，是内scrollable-div另一个DIV。这将有助于跟踪内容的高度，以便您执行逻辑。

if ($('#scrollable-inner').height() > $('#scrollable-div').height()) 
    $('#dependent-div').hide(); 
else 
    $('#dependent-div').show();

查看完整的代码在这个jsFiddle &演示。

来源

2012-03-26 13:01:22

当我尝试这个，我的价值观都是一样的。我的外部div具有内联高度设置，并且内部div必须设置为100％以允许滚动...因此它们最终都是相同的。 – 2012-03-26 13:39:25

这是因为你明确地设置了内部div来匹配它的父级的高度。内部div的要点是只跟踪内容的高度（最好别无其他），因此要确定它的高度是关键。如果你从内部div中删除'height：100％;'它会起作用吗？ – 2012-03-26 14:48:46

隐藏/显示DIV如果一个div有滚动条

回答

相关问题