Ankündigung

Einklappen
Keine Ankündigung bisher.

JS "Scrollbar" Bewegung

Einklappen

Neue Werbung 2019

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

  • JS "Scrollbar" Bewegung

    Hallo miteinander sehr kleines Problem, also es geht darum, dass ich die normale Scrollbar vom Browser durch eine individuelle ersetze, dass leider nicht durch bloßem CSS, da dies nicht jeder Browser unterstützt.

    Also habe ich eine Function zum initieren von Scrollelementen gebastelt, da würde ich auch zum Punkt kommen, wir haben hier 'ne simple spartanische Inition

    Code:
    <div class="scrollarea">
    <div class="scrollcontent">
    <div style="height:5000px;position:relative;">ja da wird gescrollt... </div>
    </div>
    <div class="scrollbar">
    <div class="scrollthumb" style="@:js('scrollheight');@"></div>
    </div>
    </div>
    @:js();@ ist übrigens eine kleine Funktionsparsing Idee von mir ist einwenig unnötig, aber es funktioniert.

    so nun haben wir zack zack zack meine kleine Denkaktion, da kommen wir schon zum Problem scrollthumb ist mit pointer-events: none; ausgestattet, die Frage warum, ja man soll damit wohl angenehmer scrollen vorallem wegen dem ziehen danach, ja man kann auch einfach die selection deaktivieren, aber das ist nun erstmal egal, da habe ich Testweise die Pointer events raus gelassen.. mein eig. Problem ist ja, dass beim ziehen die scrollbar in die richtige Richtung soll mousedown Events haben mir nicht viel gebracht Bsp.

    Code:
    <script>
    var LastmousePos;
    scrollbar.addEventListener("mousedown", function(e){
    LastmousePos = mousePosY();
    this.onmousemove = function(e){
    var NowMousePos = mousePosY();
    if(NowMousePos > LastmousePos){
    var ScrollTop = NowMousePos - LastmousePos;
    scrollbar.style.top = ScrollTop + "px";
    } else {
    var ScrollTop = LastmousePos - NowMousePos;
    scrollbar.style.top = ScrollTop + "px";
    }
    }
    },false)
    </script>
    diese Funktion ist totaler Bullshit da es mir beim mousedown die letzte Position ermittelt heißt also wenn ich plötzlich nun hochfahre mit der Maus scrollt es nicht mehr nach oben..

    Nun kamen mir setTimeout oder setIntervals in den Sinn.. naja da war's auch einwenig fail.. hoffentlich konnte ich euch das Problem ermitteln und würde mich über einen Denkansatz freuen

    Kurz: Beim scroll Event möchte ich den Scrollbalken in die richtige Richtung führen, als alternative habe ich nun 2x Pfeile eines das nach oben zeigt, das andere zeigt nach unten.. den Rest kann man sich ja denken ziemlich unpraktisch eine nicht klickbar scrollbare Scrollbar, auf JS Engines verzichte ich übrigens, da ich einer bin der im Selfmade mode ist bei klein arbeiten.

    Vielen Dank schonmal wenn jemand bis zum Ende kam und mir folgen konnte.


  • #2
    Zitat von LyTeK Beitrag anzeigen
    Hallo miteinander sehr kleines Problem, also es geht darum, dass ich die normale Scrollbar vom Browser durch eine individuelle ersetze, dass leider nicht durch bloßem CSS, da dies nicht jeder Browser unterstützt.
    Weshalb?
    Der Optik wegen?
    Ich verstehe den Sinn der ganzen Aktion noch nicht.
    Was möchtest du damit erreichen?

    Kommentar


    • #3
      https://github.com/ftlabs/ftscroller
      http://lab.cubiq.org/iscroll5/demos/simple/
      http://noraesae.github.io/perfect-scrollbar/
      I like cooking my family and my pets.
      Use commas. Don't be a psycho.
      Blog - CoverflowJS

      Kommentar


      • #4
        http://manos.malihu.gr/jquery-custom-content-scroller/
        --

        „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
        Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


        --

        Kommentar


        • #5
          Zitat von LyTeK Beitrag anzeigen
          auf JS Engines verzichte ich übrigens, da ich einer bin der im Selfmade mode ist bei klein arbeiten.
          Daher meine Frage.

          Kommentar

          Lädt...
          X