Impressum
Datenschutz

   Projekt: DIV Scrollbalken auf der linken Seite

Anlass

Für meine Webseite mit den Registry Keys brauchte ich ein DIV mit dem Scrollbalken auf der linken Seite, da durch die Fenster der Scrollbalken rechts verdeckt wird. Bei der ersten Version nutzte ich das Attrubt 'direction:rtl'. Aber nicht alle Browser wechseln den Scrollbalken auf die linke Seite. Meine Lösung nutzt zwei DIVs, deren Scrollfunktionen per Javascript synchronisiert werden. Vom linken DIV ist nur der Scrollbalken sichtbar und beim rechten DIV wird der senkrechte Scrollbalken ausgeschaltet. Ein übergeordnetes DIV ist für einen Rahmen vorgesehen.

Die Lösung

Info:

    Im Frame links ist die Beispielseite scroll.html eingebunden.

Download:

    Die Beispielseite scroll.html aufrufen und über Rechte-Maus-Menü 'Quelltext anzeigen' den Quelltext mit 'speichern unter' abspeichern.

Aus ein DIV mach' drei DIVs.

<div id="container" style="position:absolute; left:48px; top:93px; width:50px; height:50px; z-index:1;">
    <div id="scrollbar" onscroll="sync(false); return true;" style="width:18px; position:absolute; z-index:1;"></div>
    <div id="content" onscroll="sync(false);return true;" style="width:400px; height:200px; position:absolute; z-index:1;">
        <p>Inhalt des DIV</p>
    </div>

</div>

Die Style Sheeds der drei DIVs.

<style type="text/css" media="screen">
   div#container {border: 2px solid blue;}
   div#scrollbar { overflow-x:auto; overflow-y:scroll; white-space:nowrap; background-color:transparent; }
   div#scrollbar p { visibility:hidden;} 
   div#content { background-color:#CCCCFF; overflow-x:auto; overflow-y:hidden; white-space:nowrap;}
</style>

Das Container DIV sorgt nur für den Rahmen. Das Scrollbar DIV ist der Scrollbar auf der linken Seite und das Content DIV ist der ursprüngliche Inhalt. Die folgende Javascript-Funktion synchronisiert das Scrollen.

Die Scrollfunktion

function sync(refresh) {
    var div1 = document.getElementById('scrollbar');
    var div2 = document.getElementById('content');
    var container = document.getElementById('container');
    container.style.top = div1.style.top;
    container.style.left = div1.style.left;
    var rb = 2;
    var w1 = 0; //Rahmenbreite
    var w2 = w1 + w1; //doppelte Rahmenbreite
    if (refresh) {
        div1.innerHTML = div2.innerHTML;
        div1.style.width = '17px';
        if (navigator.userAgent.indexOf("Opera") != -1) w1 = rb; //Opera Rahmenbreite
        if (navigator.userAgent.indexOf("MSIE") != -1) { // ie
            div1.style.width = '18px'; // bei exakt 17 funktionieren die Scrollpfeile nicht
            w2 = 0; //doppelte Rahmenbreite
        }
        // der richtige Wert ist 17px, aber dann funktioniert das Scrollen mit den Pfeilen nicht mehr
        if (navigator.userAgent.indexOf("Safari") != -1) div1.style.width = '15px'; //safari
        div2.style.top = div1.style.top;
        div2.style.left = (div1.offsetLeft + div1.offsetWidth - w1) + 'px';
        div1.style.height = div2.offsetHeight + 'px';
        if (navigator.userAgent.indexOf("Firefox") != -1) {
            if (div2.clientHeight != div2.offsetHeight) div1.style.height = (div2.offsetHeight - div1.offsetWidth) + 'px'; // ff
        }
    }
    // bei IE8 muss die Border Breite noch doppelt addiert werden
    container.style.width = (div1.offsetWidth + div2.offsetWidth - w2) + 'px';
    container.style.height = (div2.offsetHeight) + 'px';;
    div2.scrollTop = div1.scrollTop;
}

Die Funktion muss nach dem Laden einmal aufgerufen werden, 'sync(true)'. Mit dem Parameter 'true' wird der Inhalt vom Content DIV in das Scrollbar DIV kopiert. Wenn der sichtbare Inhalt per Javascript verändert wird, ist in den entsprechenden Funktionen ebenfalls die Funktion mit sync(true) aufzurufen (so wie bei RegKeys).
 

zurück zurück