Jens Schärer: DIV per Javascript scrollen

Hi Leute!

ich hab ein kleines Problem: auf meiner Seite möchte ich ein DIV mit Textinhalt anbieten, welches mit Overflow: hidden in der Größe begrenzt ist. Da die Standard-Scrollbalken welche mir bei Overflow: scroll angeboten werden nicht zum Design passen habe ich mich entschieden selbst eine Art Scrollbar zu integrieren. Diese muss nicht voll funktionsfähig sein, ich möchte lediglich zwei Buttons haben, welche bei Klick den Text um 3px nach oben oder nach unten Scrollen. Wie realisiere ich sowas möglichst einfach per Javascript?
Ich habe es mit folgendem Code probiert, das funktioniert allerdings nicht:

document.getElementById('contentDiv').scrollBy(0,3);

was mache ich falsch bzw. wie mache ich es richtig?

vielen Dank schonmal,

Gruß,
Jens

  1. hi,

    document.getElementById('contentDiv').scrollBy(0,3);

    was mache ich falsch

    Du versuchst eine Methode, die nur das window-Objekt kennt, auf ein node-Objekt anzuwenden.

    bzw. wie mache ich es richtig?

    https://forum.selfhtml.org/?t=136744&m=888295

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hi,

      ich hatte mal so ne Kunktion.

      Als erstes habe ich mir einen

      <div id="navi" style="position:absolute">

      Bereich gebaut. Per Knopfdruck konnte der hoch oder runter scrollen.

      Dann habe ich mit CSS clip den Bereich angezeigt der Sichtbar sien sollte.

      Also Navi Scrollt 3px hoch, clip bereich 3px runter. So hats dann geklappt. Leider gibts das Script nicht mehr.

      Probier mal ein wenig rum.

      Grüße, Andi

  2. Hallo,

    was mache ich falsch bzw. wie mache ich es richtig?

    Man könnte am padding-top schrauben, z.b:

    function srolldown (divId) {
       var elem = document.getElementById(divId);
       var aktuellerWert = parseInt(elem.style.paddingTop);
       aktuellerWert--;
       elem.style.paddingTop = aktuellerWert+"px";
    }

    function srollup (divId) {
       var elem = document.getElementById(divId);
       var aktuellerWert = parseInt(elem.style.paddingTop);
       aktuellerWert++;
       elem.style.paddingTop = aktuellerWert+"px";
    }

    Hab das etzt nicht probiert, ist nur ne Idee.

    Gruesse,
    Joerg

    1. Hallo Joerg

      Man könnte am padding-top schrauben, z.b:

      Das dürfte kaum funktionieren, weil padding keine negativen Werte annehmen kann und weil padding die die Größe des Elements verändert.

      Margin des ersten Kindelements könnte den gewünschten Effekt hervorrufen.

      Auf Wiederlesen
      Detlef

      --
      - Wissen ist gut
      - Können ist besser
      - aber das Beste und Interessanteste ist der Weg dahin!