Frage Benutzerdefinierte Bildlaufleiste Visualisierung mit HTML / CSS / JavaScript


Ich erstelle eine hochspezialisierte Anwendung, in der ich mit einer benutzerdefinierten Bildlaufleiste experimentieren möchte.

Im Idealfall würde ich die integrierte Scroll-Leiste deaktivieren und meine eigene zeichnen. Die Seite würde wie jede andere Seite aussehen und sich anfühlen, nur dass die Bildlaufleiste nicht sichtbar wäre. Die Pfeiltasten, das Scrollrad und alle anderen Mittel zum Scrollen der Seite sollten auf der Plattform, auf der meine Webapp läuft, als Ausnahme funktionieren.

Eine Möglichkeit wäre, den Inhalt in ein Wrapper-div zu legen, das absolut positioniert ist, mit top: 0; bottom: 0; width: 100%; overflow: hidden; Bei diesem Ansatz müsste ich das Scrolling selbst neu implementieren, indem ich Keyboard- und Scrollrad-Events lausche. Dies ist kaum ideal, vor allem Seiten-hoch und Seite-unten-Verhalten wäre schwer zu replizieren. Wie viele Pixel sollte ich auf einer Seite nach unten scrollen? Die Anzahl variiert von Plattform zu Plattform. Ich glaube, magische "beschleunigende" Schriftrollen wären auch schwer zu replizieren.

Welche Möglichkeiten habe ich bei der Implementierung dieser benutzerdefinierten Bildlaufleisten-Visualisierung?

Hinweis: Ich bin mir der Forschung bewusst, die bezüglich benutzerdefinierter Bildlaufleisten und Benutzerfreundlichkeit durchgeführt wurde. Sie brauchen nicht darauf hinzuweisen, ich bin mir schmerzlich dessen bewusst :) Ich spreche nicht nur darüber, die Bildlaufleiste neu einzufärben. Denken Sie eher an einen Filmeditor oder einen Musiksequenzer. Es ist sehr individuell und spezialisiert.

Aktualisieren:  http://augustl.com/blog/2010/custom_scroll_bar_native_behaviour


9
2018-02-12 19:37


Ursprung


Antworten:


Hier ist eine mögliche Lösung mit Javascript und CSS. Die Idee ist nicht, die Bildlaufleiste zu entfernen, sondern sie stattdessen einfach zu verstecken und weiterarbeiten zu lassen.

Konzept:

Hier wird die Bildlaufleiste des eigentlichen Inhalts außerhalb des Wrappers verschoben. Dies verhindert, dass es gesehen wird (Wrapper hat overflow:hidden;) aber verhindert nicht, dass es funktioniert.

| --------- WRAPPER ----------- |
|| -------- INHALT ----------- | --- |
|| | [^] |
|| | [0] |
|| | [0] |
|| | [] |
|| | [] |
|| | [v] |
|| -------------------------- | --- |
| --------------------------- |

Implementierung:

Das Markup:

<div class="wrapper">
  <div class="content">
    <p>1Hello World</p>
    <p>2Hello World</p>
    ...
  </div>
</div>

Und das Skript (Ich habe jQuery benutzt, aber es könnte leicht in reinem Javascript umgeschrieben werden.):

$(function() {
  // initialize: both need to have the same height and width (width default: 100%)
  // these could go on your stylesheet of course.
  $("div.wrapper").css({ height: "200px", overflow: "hidden" });
  $("div.content").css({ height: "200px", overflow: "auto" }); 

  // now extend the content width beyond the wrapper
  $("div.content").width($("div.content").width() + 22); // 22px is the width of IE scrollbars

  // prevent highlight dragging from scrolling the wrapper div (thereby displaying the bars)
  $("div.wrapper").scroll(function() {
    this.scrollLeft = 0;
    this.scrollTop = 0;
  });

  $("div.content").scroll(function() {
    // update custom scrollbar display using this.scrollTop as a percentage of this.clientHeight
    // alert("Place slider at " + ((100 * this.scrollTop) / this.clientHeight) + "%!");
  });
});

Und hier funktioniert es (Obwohl ich keine benutzerdefinierte Bildlaufleiste habe).


15
2018-02-17 03:20



Ich denke, da es sich um eine hoch spezialisierte Sache handelt, muss man nicht über Usability reden :-)

Das einzige, was mir bewusst ist, ist die Implementierung einer eigenen Ereigniserfassung - basierend auf Tastendruck, Mausklick usw. - es sollte einfach sein, die aktuelle Position der Seite zu erhalten (Art von virtuell - weil Sie alles geladen haben und nur den Brauch ändern "Ansichtsfenster").

Ich empfehle sehr, die großen QuirksMode-Tutorials und -Dokumente zu überprüfen:

Ich bin mir aber nicht sicher, ob ich das Scrollrad benutzen kann - ich habe noch nichts von Technik gehört, um das nachzuahmen, aber sicherlich könntest du etwas finden oder programmieren.

EDIT: Ich habe eine Low-Level-JS-Implementierung des Scrollrads gefunden (Klickrad): http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel


2
2018-02-12 19:44