Hide/Show div mit Javascript, wenn ein div hat Scrollbar

Ich habe ein div, die eine Inline Höhe hat 100% einstellte Höhe des Browserfensters sein:Hide/Show div mit Javascript, wenn ein div hat Scrollbar

element.style { 
    height: 400px; 
} 
#scrollable-div { 
    overflow-x: hidden; 
    overflow-y: scroll; 
    position: relative; 
    width: 270px; 
}

Mit JS oder jQuery, ich möchte, um zu bestimmen, ob das div momentan eine scrollbar hat, und wenn ja, ein anderes div verstecken/anzeigen. Irgendwelche Gedanken?

Quelle

2012-03-26 Joel Eckroth

Diese vielleicht helfen Ihnen http://stackoverflow.com/questions/681087/how-can-i-detect-a-scrollbar-presence-using-javascript-in-html-iframe –

Ich glaube, dass das Beispiel gerade erkennt Wenn die ganze Seite eine Bildlaufleiste hat, nicht eine individuelle Div ... –

Ja, ich weiß, ich dachte nur, es war vielleicht nützlich und könnte geändert werden =) –

können Sie diese Funktion nutzen zu wissen, ob das Element Scrollbar hat:

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

Quelle

2012-03-26 12:48:40 MCSI

ich ein anderes div würde vorschlagen, mit, der den Inhalt enthält und innerhalb scrollable-div. Dies hilft Ihnen, die Höhe des Inhalts zu verfolgen, damit Sie die Logik ausführen können.

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

ansehen Code & Demo an diesem jsFiddle.

Quelle

2012-03-26 13:01:22

Wenn ich das versuche, sind meine Werte für beide immer gleich. Mein äußerer div hat die Inline-Höhe und der innere div muss auf 100% gesetzt werden, um Scrollen zu ermöglichen ... also enden beide gleich. –

Das liegt daran, dass Sie das innere div explizit auf die Höhe des übergeordneten Elements festgelegt haben. Der Punkt des inneren div ist, nur die Höhe des Inhalts zu verfolgen (und vorzugsweise nichts anderes), so dass es entscheidend ist, seine eigene Höhe zu bestimmen. Funktioniert es, wenn Sie 'height: 100%;' aus dem inneren div entfernen? –

Hide/Show div mit Javascript, wenn ein div hat Scrollbar

Antwort

Verwandte Themen