隱藏/顯示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有滾動條

回答

相關問題