JS-Test ob Scrollbar gezeigt in Div Overflow:auto

[chansel0049]

Ist es irgendwie per Javascript möglich zu testen ob ein Scrollbar bei einem overflow:auto Layer angezeigt wird oder nicht?

Erklärung:
Innerhalb einer dynamischen Seite erstetze ich den Scrollbalken mit einem customized Scrollbar (wiederum Divs) wenn ein Text länger ist als der innerhalb des Divs zur Verfügung stehende Platz um in unterschiedlichen Browsern das selbe Scrollbar layout zu haben.

Das ganze ist 'unobstrusive' d.h. nur per Einbindung eines Script Files sonst nirgends im HTML. Wenn kein JS unterstützt wird oder eine Browserversion nicht genügend ist wird halt nix gemacht und der Standrd Scrollbar kann erscheinen. Funktioniert wunderbar in allen getesten Browsern Firefox/Opera/IE/Konqueror auf Linux/Win. Die Entscheidung ob der Scrollbar angezeigt werden soll oder nicht basiert zur Zeit anhand eines Wertevergleichs etwa:

if (contentNow.offsetHeight<contentDiv.offsetHeight) ...

was auch funktioniert. Allerdings wird bei unterschiedlichen Browsern dieser Grenzwert in Abhängigkeit der Version immer etwas anders überschritten (Sprich In Firefox 1.0 und Firefox 1.5 und IE6 liegen immer ein paar Pixel dazwischen, bei denen das Skript noch nicht anspricht aber der Standard-Scrollbar bereits angezeigt wird)


Deshalb würd ich gern anders Testen und zwar ob das Standard-Scrollbar automatisch angezeigt wird oder nicht und dann erst dementsprechend das Skript aufrufen anstatt obigen Test durchlaufen lassen..

Gibt es irgendwas wie :

if (contentDiv.ScrollBarIsVisible)

Iregendjemand eine Idee?

Für Hilfe oder Klapse auf den Denkapparat immer dankbar

[reallife]

Also wenn die Eigenschaft "scrollHeight" größer ist als die Eigenschaft "offSetHeight" des Div-Objektes dann wird er die Scrollbar anzeigen.

function hasScrollbar(strDivID)
{
    rtn = false;
    
    var objDiv = document.getElementById(strDivID);
    if ( typeof(objDiv) == 'object' && objDiv.tagName == 'DIV' &&
             (typeof(objDiv.style.overflow) != 'undefined' && objDiv.style.overflow == 'auto') )
    {
        if ( objDiv.scrollHeight > objDiv.offSetHeight )
            rtn = true;
    }
    
    return rtn;
} 

OffTopic:

---

Das ganze ist nicht getestet worden :P

---

EDIT:

---

[list=1][*]wahsaga hat natürlich recht - da hab ich wohl die Attribute vertauscht[*]Jetzt wird auch geprüft ob dem Div die Styleeigenschaft 'overflow' gesetzt wurde.[/list=1]

---

[wahsaga]

@reallife:
Dein Vorschlag wird vermutlich an der Stelle scheitern, wo du
objDiv.style.overflow == 'auto'
abzufragen versuchst - über das style-Objekt kannst du Werte von CSS-Eigenschaften nur dann auslesen, wenn sie per Javascript oder direkt per style-Attribut im Element selber gesetzt wurden.

Wenn die Existenz einer Eigenschaft .scrollWidth (meinst du hier eigentlich scrollHeight? Width mit Height zu vergleichen ist ja eher sinnfrei ...) davon abhängen sollte, ob das Element den Style overflow:auto hat, dann solltest du besser auf diese Existenz dieser Eigenschaft abfragen.

[chansel0049]

Danke für die Antworten,

An scrollHeight hat ich gar nicht gedacht.

@reallife: offSetHeight muss offsetHeight sein

Der Test auf overflow==auto bringt nichts (beim Auslesen leer) -- ist aber auch egal, da ich definitiv davon ausgehe, dass es overflow ist

Das eigentliche Problem besteht jedoch weiterhin, dass bei Inhalten, die eigentlich keinen Scrollbalken benötigen (d.h. die komplett im Div angezeigt werden) in verschieden Browsern (Netscape, ältere Firefox) den Scrollbar (Standard) anzeigen, obwohl es eigentlich nicht nötig wäre.

Um das Problem einigermassen zu umgehen, arbeite ich jetzte mit Tolerazzwerten in der Art

if ( objDiv.scrollHeight > (objDiv.offsetHeight+tolerance) ) {
initCustomScrollBar(objDiv);
} else {
objDiv.style.overflow='hidden';
}

Allerdings ist auch dies nicht unbedingt sauber.

Dammich. Ich wünschte es gäbe nur ein Betriebssystem und nur ein Browser und nur eine Version ...