Mausrad Scrolling in einem DIV

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Mausrad Scrolling in einem DIV

    Hallo zusammen,

    ich habe ein Problem mit der Implementierung einer Mausrad-Scrolling-Funktion. Ich benutze einen ganz normalen DIV-Scroller. Nun möchte ich aber, dass auch bei Nutzung des Mausrades der Inhalt gescrollt wird. Hat jemand eine Idee wie man das machen kann? Habe nichtmal einen Ansatz und bin aus anderen Scripts auch nicht schlau geworden.

    Hier findet Ihr das Skript wie es bisher aussieht:

    http://www.webassemblys.de/files/scr.../scroller.html


    Danke schonmal für eine Antwort!


    P.S.: Das Scrolling-Script

    function TextScroll(scrollname, div_name, up_name, down_name)
    {
    this.div_name = div_name;
    this.name = scrollname;
    this.scrollCursor = 0;
    this.speed = 5;
    this.timeoutID = 0;
    this.div_obj = null;
    this.up_name = up_name;
    this.dn_name = down_name;

    {
    if (document.getElementById) {
    div_obj = document.getElementById(this.div_name);
    if (div_obj) {
    this.div_obj = div_obj;
    this.div_obj.style.overflow = 'hidden';
    }
    div_up_obj = document.getElementById(this.up_name);
    div_dn_obj = document.getElementById(this.dn_name);
    if (div_up_obj && div_dn_obj) {
    div_up_obj.onmousedown = function() { eval(scrollname + ".scrollUp();") };
    div_up_obj.onmouseup = function() { eval(scrollname + ".stopScroll();") };

    div_dn_obj.onmousedown = function() { eval(scrollname + ".scrollDown();") };
    div_dn_obj.onmouseup = function() { eval(scrollname + ".stopScroll();") };
    div_dn_obj.onmouseout = function() { eval(scrollname + ".stopScroll();") };

    }
    }
    }

    this.stopScroll = function() {
    clearTimeout(this.timeoutID);
    }

    this.scrollUp = function() {
    if (this.div_obj) {
    this.scrollCursor = (this.scrollCursor - this.speed) < 0 ? 0 : this.scrollCursor - this.speed;
    this.div_obj.scrollTop = this.scrollCursor;
    this.timeoutID = setTimeout(this.name + ".scrollUp()", 60);
    }
    }

    this.scrollDown = function() {
    if (this.div_obj) {
    this.scrollCursor += this.speed;
    this.div_obj.scrollTop = this.scrollCursor;
    this.timeoutID = setTimeout(this.name + ".scrollDown()", 60);
    }
    }

    this.resetScroll = function() {
    if (this.div_obj) {
    this.div_obj.scrollTop = 0;
    this.scrollCursor = 0;
    }
    }
    }

  • #2
    1. The requested URL /files/scrolling/scroller.html was not found on this server.
    2. bitte php-tags () benutzen

    peter

    EDIT:
    und schau dir mal onscroll an
    Zuletzt geändert von Kropff; 19.05.2009, 11:31.
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      Hi,

      ich hatte gerade noch etwas an dem Script geändert... die Datei liegt jetzt auf dem Server!

      Schaue mich mal wg. onscroll um.

      Kommentar


      • #4
        wenn ich es richtig verstanden habe, willst du nen eigenen Scrollbalken da haben?
        Dann wird dir dieses Tutorial dir helfen -> Mouse wheel programming in JavaScript

        anderfalls benutzt doch einfach overflow: auto;
        [FONT=Comic Sans MS]Hab ich dir erfolgreich geholfen? Wenn ja, dann hilf mir auch und bewerte mich auf php-resource.de[/FONT]
        [FONT=Comic Sans MS]
        [/FONT][FONT=Comic Sans MS]Go and help me[/FONT]

        Kommentar


        • #5
          Neenee, ich möchte dass man nicht auf die Pfeile klicken muss um zu scrollen, sondern mit dem Mausrad den gleichen Effekt hat. Dabei soll aber kein Scrollbalken sichtbar sein, optisch soll es genau so bleiben. Ist das machbar?

          Kommentar


          • #6
            Also ich kann dir gleich sagen dass Mini-Gucklöcher mit Pfeiltasten zum Scrollen unter den Top 10 der Hassobjekte des Internets sind. Wer sowas macht, will einfach nur seine sadomasochistische Ader an seinen Besuchern ausleben.

            Und du kannst nicht davon ausgehen, dass jeder ein Mausrad hat.

            Kann man in dem Mistding überhaupt scrollen, wenn Javascript nicht verfügbar ist?

            Kommentar


            • #7
              Nein kann man nicht. Allerdings ist der Prozentsatz derjenigen, die kein JavaScript benutzen doch eher gering. Kaum ein Nutzer kann heute ohne JS surfen... jegliche AJAX Anwendung würde wegfallen.

              Der Kunde möchte explizit die beiden Scroll-Pfeile und keinen Balken. Insofern bin ich daran gebunden, finde die Lösung aber zugegebenermaßen auch nicht optimal.

              Kommentar


              • #8
                Zitat von sir_holmes Beitrag anzeigen
                Nein kann man nicht. Allerdings ist der Prozentsatz derjenigen, die kein JavaScript benutzen doch eher gering. Kaum ein Nutzer kann heute ohne JS surfen... jegliche AJAX Anwendung würde wegfallen.
                Viele AJAX-Anwendungen machen aber Sinn. Kleine Minifenster, in denen man umständlich mit hässlichen Pfeiltasten scrollen muss ergeben keinen Sinn.

                Hast du auch getestet, ob die Seite auf einem mobilen Endgerät (PDA, Handy, etc.) korrekt funktioniert? Denn immer mehr Leute surfen unterwegs mit ihrem tragbaren Gerät und diese würde ich nicht vernachlässigen.

                Ist keine Kritik an dich, sondern eine Kritik generell an so einem "Konzept". Vielleicht kannst du deinem nächsten Auftraggeber solche schwachsinnigen Ideen besser gleich ausreden.

                Kommentar


                • #9
                  @ts
                  schon dem link von ciaosen gefolgt?

                  peter
                  Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                  Meine Seite

                  Kommentar


                  • #10
                    Also das mit den balken ist keine pflicht.
                    Das Tutorial zeigt dir, wie du die events des Mausrades abfangen kannst und daraus dann dein eigenes scrollen simulieren.

                    mfg jura
                    [FONT=Comic Sans MS]Hab ich dir erfolgreich geholfen? Wenn ja, dann hilf mir auch und bewerte mich auf php-resource.de[/FONT]
                    [FONT=Comic Sans MS]
                    [/FONT][FONT=Comic Sans MS]Go and help me[/FONT]

                    Kommentar


                    • #11
                      Also ich habe jetzt versucht den Event-Handler einzubauen. Hat soweit auch geklappt... Scrollen per Mausrad klappt. Aber dafür kann man nicht mehr über die Pfeile scrollen!?!? An dem Code habe ich aber nichts verändert:


                      function TextScroll(scrollname, div_name, up_name, down_name)
                      {
                      this.div_name = div_name;
                      this.name = scrollname;
                      this.scrollCursor = 0;
                      this.speed = 5;
                      this.timeoutID = 0;
                      this.div_obj = null;
                      this.up_name = up_name;
                      this.dn_name = down_name;

                      {
                      if (document.getElementById) {
                      div_obj = document.getElementById(this.div_name);
                      if (div_obj) {
                      this.div_obj = div_obj;
                      this.div_obj.style.overflow = 'hidden';
                      }
                      div_up_obj = document.getElementById(this.up_name);
                      div_dn_obj = document.getElementById(this.dn_name);
                      if (div_up_obj && div_dn_obj) {
                      div_up_obj.onmousedown = function() { eval(scrollname + ".scrollUp();") };
                      div_up_obj.onmouseup = function() { eval(scrollname + ".stopScroll();") };
                      div_up_obj.onmouseout = function() { eval(scrollname + ".stopScroll();") };
                      div_dn_obj.onmousedown = function() { eval(scrollname + ".scrollDown();") };
                      div_dn_obj.onmouseup = function() { eval(scrollname + ".stopScroll();") };
                      div_dn_obj.onmouseout = function() { eval(scrollname + ".stopScroll();") };

                      }
                      }
                      }

                      [COLOR="Red"]this.handle(delta) = function {
                      if (delta < 0) {
                      div_dn_obj.onscroll = function() { eval(scrollname + ".scrollDown();") };
                      }
                      else {
                      div_up_obj.onscroll = function() { eval(scrollname + ".scrollUp();") };
                      }
                      }[/COLOR]


                      this.stopScroll = function() {
                      clearTimeout(this.timeoutID);
                      }

                      this.scrollUp = function() {
                      if (this.div_obj) {
                      this.scrollCursor = (this.scrollCursor - this.speed) < 0 ? 0 : this.scrollCursor - this.speed;
                      this.div_obj.scrollTop = this.scrollCursor;
                      this.timeoutID = setTimeout(this.name + ".scrollUp()", 60);
                      }
                      }

                      this.scrollDown = function() {
                      if (this.div_obj) {
                      this.scrollCursor += this.speed;
                      this.div_obj.scrollTop = this.scrollCursor;
                      this.timeoutID = setTimeout(this.name + ".scrollDown()", 60);
                      }
                      }

                      this.resetScroll = function() {
                      if (this.div_obj) {
                      this.div_obj.scrollTop = 0;
                      this.scrollCursor = 0;
                      }
                      }
                      }


                      Hier noch einmal der Link mit der neuen Version. Und wie kann ich den Scrollbalken der jetzt auf einmal erschienen ist wieder verstecken!?

                      HTML Template

                      Kommentar


                      • #12
                        Zitat von sir_holmes Beitrag anzeigen
                        Und wie kann ich den Scrollbalken der jetzt auf einmal erschienen ist wieder verstecken!?
                        PHP-Code:
                        overflownone
                        und bitte ab sofort php-tags verwenden! denn den code schau ich mir nicht an.

                        peter
                        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                        Meine Seite

                        Kommentar


                        • #13
                          Mmmmh, funktioniert nicht - weder im JS noch im CSS...
                          und hat jemand eine Idee warum die Scrolling-Funktion über onmousedown nicht mehr funktionieren seit das Scroll-Event im Script ist!?

                          Kommentar


                          • #14
                            Zitat von sir_holmes Beitrag anzeigen
                            Mmmmh, funktioniert nicht - weder im JS noch im CSS...
                            und hat jemand eine Idee warum die Scrolling-Funktion über onmousedown nicht mehr funktionieren seit das Scroll-Event im Script ist!?
                            weil dir da eine js-fehlermeldung um die ohren gehauen wird. zumindest, wenn man z.b. firebug benutzt

                            peter
                            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                            Meine Seite

                            Kommentar


                            • #15
                              okay hab mal geschaut was du da falsch hast.
                              1. Da hast du 2 Klammern die zu nichts gehören kannst du raus tun
                              2. diese Zeile hier -> "this.handle(delta) = function" ist falsch
                              sie muss so heißen -> "this.handle = function(delta)"

                              dann gucken wir weiter.

                              Dein anderes Problem das du jetzt nicht mehr normal scrollen kannst. Das hatte ich auch mal, habs auch wegbekommen. Es liegt daran das er das beim rausgehen vom DIV er nicht den event mit dem mousewheel entfernt. Das musst du ihm nochmal sagen.
                              [FONT=Comic Sans MS]Hab ich dir erfolgreich geholfen? Wenn ja, dann hilf mir auch und bewerte mich auf php-resource.de[/FONT]
                              [FONT=Comic Sans MS]
                              [/FONT][FONT=Comic Sans MS]Go and help me[/FONT]

                              Kommentar

                              Lädt...
                              X