Natives JS implementiert benutzerdefinierte Bildlaufleistenkomponente

Natives JS implementiert benutzerdefinierte Bildlaufleistenkomponente

In diesem Artikelbeispiel wird der spezifische JS-Code zur Implementierung einer benutzerdefinierten Bildlaufleistenkomponente zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Funktionale Anforderungen:

1. Erstellen Sie Menüinhalte entsprechend der Datenstruktur und zeigen Sie sie auf der Seite an.
2. Nach dem Klicken auf das Menü wird der entsprechende Untermenüinhalt angezeigt. Wenn der Gesamtinhalt überläuft, wird eine Bildlaufleiste angezeigt.
3. Die Höhe der Bildlaufleiste sollte sich ändern, wenn sich die Gesamthöhe des Inhalts ändert.
4. Ziehen Sie die Bildlaufleiste mit der Maus und der gesamte Inhalt wird nach oben gescrollt.
5. Wenn die Maus scrollt, scrollen auch die Bildlaufleiste und der gesamte Inhalt entsprechend.

Schauen wir uns die Wirkung an:

Standardzustand:

Klicken Sie auf das Menü. Nach dem Überlauf des Inhalts wird eine Bildlaufleiste angezeigt.

Ziehen Sie die Bildlaufleiste mit der Maus, und der gesamte Inhalt wird nach oben gescrollt:

analysieren:

  • In diesem Fall sind zwei Komponenten enthalten: das Akkordeonmenü und die Bildlaufleiste. Sie können also separat geschrieben und dann zusammen integriert werden.
  • Beim Faltmenü müssen wir die Situation mehrstufiger Menüs berücksichtigen und dazu Rekursion verwenden. Die Struktur der Daten muss vereinheitlicht werden, um die Datenverarbeitung zu erleichtern.
  • Bei der Erstellung der Bildlaufleiste gibt es zwei proportionale Gleichungen . Eine lautet: Höhe der Bildlaufleiste / Höhe des äußeren Div = Höhe des äußeren Div / Höhe des Gesamtinhalts; die andere lautet: Position der Bildlaufleiste / (Höhe des äußeren Div - Höhe der Bildlaufleiste) = Scroll-Top des Inhalts / (Höhe des Gesamtinhalts - Höhe des äußeren Div)
  • Beim Anklicken des Minimierungsmenüs muss die Höhe der Bildlaufleiste entsprechend eingestellt werden. Das Klappmenü befindet sich in der Datei Menu.js und die Bildlaufleisteneinstellung in der Datei ScrollBar.js, die das Auslösen und Abhören von Ereignissen erfordert.
  • Überwachen Sie die Maus-Scroll-Ereignisse des Menüs. Bestimmen Sie beim Scrollen mit der Maus die Richtung des Scrollrads und legen Sie den oberen Wert der Bildlaufleiste und des Inhalts fest. Das Auslösen und Überwachen von Ereignissen ist ebenfalls erforderlich.

Der Code ist unten angehängt:

HTML-Struktur, Daten simulieren, äußeren Container erstellen:

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <title>Bildlaufleiste</title>
</Kopf>
<Text>
 <Skripttyp="Modul">
 importiere Utils aus „./js/Utils.js“;
 Menü aus „./js/Menu.js“ importieren;
 importiere ScrollBar aus „./js/ScrollBar.js“;
 var arr = [
  {Name:"A",Kategorie:[
  {name:"Audi",category:[
   {name:"Audi A3",href:""},
   {name:"Audi A4L",category:[
   {name:"Audi A4L-1",href:""}
   ]},
   {name:"Audi Q3",href:""},
   {name:"Audi Q5L",href:""},
   {name:"Audi Q2L",href:""},
   {name:"Audi Q7 (Importiert)",href:""},
   {name:"Audi Q8 (Importiert)",href:""},
   {name:"Audi Q7 New Energy",href:""},
  ]},
  {Name:"Alfa Romeo",Kategorie:[
   {name:"Stelvio (Importiert)",href:""},
   {name:"Giulia (Importiert)",href:""},
  ]}
  ]},
  {name:"B",kategorie:[
  {name:"Mercedes-Benz",category:[
   {name:"Mercedes-Benz C-Klasse",href:""},
   {name:"Mercedes-Benz E-Klasse",href:""},
   {name:"Mercedes-Benz GLA-Klasse",href:""},
   {name:"Mercedes-Benz GLC-Klasse",href:""},
   {name:"Mercedes-Benz A-Klasse",href:""},
   {name:"Mercedes-Benz E-Klasse (Importiert)",href:""},
   {name:"Mercedes-Benz A-Klasse (Importiert)",href:""},
   {name:"Mercedes-Benz B-Klasse (Importiert)",href:""},
   {name:"Verkäufer",href:""},
   {name:"Mercedes-Benz V-Klasse",href:""},
  ]},
  {name:"BMW",kategorie:[
   {name:"BMW 5er",href:""},
   {name:"BMW 1er",href:""},
   {name:"BMW X1",href:""},
   {name:"BMW X5 (Importiert)",href:""},
   {name:"BMW X6 (Importiert)",href:""},
  ]},
  {name:"Honda",Kategorie:[
   {name:"Jingrui",href:""},
   {name:"Civic",href:""},
   {name:"Honda CR-V",href:""},
   {name:"Honda XR-V",href:""},
   {name:"Honda UR-V",href:""},
   {name:"Elysion",href:""},
   {name:"Xiangyu",href:""},
   {name:"INSPIRE",href:""},
   {name:"Lingpai",href:""},
   {name:"Übereinstimmung",href:""},
   {name:"Binzhi",href:""},
  ]},
  {Name:"Buick",Kategorie:[
   {name:"Kailue",href:""},
   {name:"Sonstiges",href:""},
   {name:"Verkäufer",href:""},
   {name:"YueLang",href:""},
   {name:"Regal",href:""},
   {name:"LaCrosse",href:""},
   {name:"Angkola",href:""},
   {name:"Envision",href:""},
   {name:"Buick GL8",href:""},
   {name:"Buick GL6",href:""},
   {name:"VELITE",href:""},
  ]}
  ]}
 ]
 var-Container;
 init();
 Funktion init(){
  Menü erstellen(arr);  
  ScrollBar erstellen();
 }
  Funktion Menü erstellen(arr){
  //Ein Menü erstellen let menu=new Menu(arr);
  //Erstellen Sie den äußersten Container container=Utils.createE("div",{
  Breite: "235px",
  Höhe: "360px",
  Rahmen: „1px durchgezogen #ccc“,
  Position: „relativ“,
  Überlauf: „versteckt“
  })
  Menü.AnhängenAn(Container);
  Utils.appendTo(Container,"Body")
 }
 Funktion „ScrollBar erstellen()“
  //Bildlaufleiste erstellen let scrollBar=new ScrollBar(container);
  scrollBar.appendTo(container);
 }
 </Skript>
</body>
</html>

Die Datei Menu.js erstellt den Inhalt des Klappmenüs entsprechend den Daten:

importiere Utils aus „./Utils.js“;
Standardklasse exportieren Menü{
 statische SET_BAR_HEIGHT="Balkenhöhe_festlegen";
 statisches MOUSE_WHEEL_EVENT="Mausrad_Ereignis";
 Konstruktor(_Liste){
 dies.elem = dies.createElem(_list);
 }
 Element erstellen(_Liste){
 wenn(dieses.elem) dieses.elem zurückgeben;
 //Erstellen Sie den äußersten ul-Container let ul=Utils.createE("ul",{
  Listenstil: „keine“,
  Polsterung: "0px",
  Rand: "0px",
  Breite: "235px",
  Höhe: "360px",
  Farbe:"#333",
  Schriftgröße: "14px",
  Benutzerauswahl: "keine",
  Position: „absolut“
 });
 //Li-Liste erstellen this.createMenu(_list,ul);
 //ul wartet auf Klickereignisse ul.addEventListener("click",e=>this.clickHandler(e));
 //ul lauscht auf Scrollrad-Ereignisse, Firefox verwendet DOMMouseScroll, andere Browser verwenden das Mausrad
 ul.addEventListener("Mausrad",e=>this.mouseWheelHandler(e));
 ul.addEventListener("DOMMouseScroll",e=>this.mouseWheelHandler(e));
 Rückkehr ul;
 }
 anhängenAn(übergeordnet){
 Utils.appendTo(dieses.Element,übergeordnet);
 }
 //Erstellen Sie ein Menü der ersten Ebene createMenu(_list,parent){
 für (let i=0;i<_list.length;i++){
  let li = Utils.createE("li",{
  Hintergrund:"#f5f5f5",
  Rahmen oben: „1px durchgehend #ddd“,
  Zeilenhöhe: "32px",
  },{
  data:1, //Kontrolliert, dass das Menü der ersten Ebene durch Anklicken eingeklappt wird})
  let span = Utils.createE("span",{
  marginLeft:"14px",
  Schriftgröße: "18px"
  },{
  Textinhalt:_Liste[i].Name
  })
  Utils.appendTo(span,li);
  Utils.appendTo(li,übergeordnet);
  //Erstelle ein Untermenü. Der dritte Parameter steuert, ob das Untermenü angezeigt wird this.createSubMenu(_list[i].category,li,0);
 }
 }
 //Ein Untermenü erstellen createSubMenu(_subList,_parent,_index){
 //Wenn kein Untermenü vorhanden ist, herausspringen if(_subList.length===0) return;
 let subUl=Utils.createE("ul",{
  Listenstil: „keine“,
  Hintergrund:"#fff",
  Polsterung: "0px",
  Rand: "0px",
  Schriftgröße: "14px",
  Anzeige:_index===0? "Block" : "keine"
 })
 für (let i=0;i<_subList.length;i++){
  let subLi=Utils.createE("li",{
  paddingLeft:"40px",
  Position: „relativ“,
  Cursor: "Zeiger"
  })
  wenn(!_subList[i].category){
  //Wenn das aktuelle Menü kein Untermenü hat, erstellen Sie ein Tag zum Springen let subA=Utils.createE("a",{
   Farbe:"#333",
   Textdekoration: „keine“,
   Breite: "100%",
   Anzeige: „Inline-Block“
  },{
   Textinhalt:_subList[i].name,
   href:_subList[i].href || "javascript:void(0)",
   Ziel:_subList[i].href ? "_blank" : "_self"
  })
  Utils.appendTo(subA,subLi);
  }anders{
  //Wenn das aktuelle Menü ein Untermenü hat, erstellen Sie ein Span-Tag let subSpan=Utils.createE("span",{
   Position: „absolut“,
   links:"20px",
   oben: "8px",
   Rahmen: "1px durchgezogen #ccc",
   Anzeige: "Inline-Block",
   Breite: "10px",
   Höhe: "10px",
   Zeilenhöhe: "8px"
  },{
   Textinhalt:_Unterliste[i].Kategorie.Länge>0? "+" : "-"
  })
  subLi.textContent=_subList[i].name;
  Utils.appendTo(subSpan,subLi);
  }
  Utils.appendTo(subLi,subUl);
  //Wenn das aktuelle Menü kein Untermenü hat, überspringe die folgende Ausführung if(!_subList[i].category) continue;
  //Verwende das Untermenü des aktuellen Menüs als Parameter und führe eine Rekursion durch this.createSubMenu(_subList[i].category,subLi,1);
 }
 Utils.appendTo(subUl,_parent);
 }
 KlickHandler(e){
 //Wenn der aktuelle Klick kein Li-Tag oder Span ist, direkt herausspringen, if(e.target.nodeName!=="LI" && e.target.nodeName!=="SPAN") return;
 lass targ;
 wenn(e.target.nodeName==="SPAN") ziel=e.target.parentElement;
 sonst ziel=e.ziel;
 //Wenn sich unter dem aktuellen Klick Li kein Untermenü befindet, direkt herausspringen if(targ.children.length<=1) return;
 //Wenn der aktuelle Klick das Menü der ersten Ebene ist, direkt herausspringen if(targ.data===1) return;
 //Anzeige und Ausblenden von ul unter dem aktuell angeklickten Li steuern if(!targ.bool) targ.lastElementChild.style.display="block";
 sonst targ.lastElementChild.style.display="keine";
 targ.bool=!targ.bool;
 //Ändern Sie den Inhalt des Span-Tags this.changeSpan(targ);
 //Ein Ereignis auslösen, um die Höhe der Bildlaufleiste zu ändern. var evt = new Event (Menu.SET_BAR_HEIGHT);
 document.dispatchEvent(evt)
 }
 ändereSpan(Element){
 wenn(elem.lastElementChild.style.display==="block"){
  elem.firstElementChild.textContent="-";
 }anders{
  elem.firstElementChild.textContent="+";
 }
 }
 MausradHandler(e){
 //Ereignisblasen stoppen e.stopPropagation();
 //Firefox prüft e.detail. Wenn e.detail<0 ist, bedeutet dies, dass das Rad unten und die Seite oben ist. let tag=e.detail,wheelDir;
 //Andere Browser beurteilen e.deltaY. Wenn e.deltaY <0 ist, bedeutet dies, dass das Scrollrad unten und die Seite oben ist, if (tag === 0) tag = e.deltaY;

 if(tag>0){
  //Das Rad scrollt nach unten und die Seite geht nach oben wheelDir="down";
 }anders{
  Radrichtung = "nach oben";
 }
 //Ein Ereignis auslösen und die Richtung des Scrollrads übergeben let evt = new Event(Menu.MOUSE_WHEEL_EVENT);
 evt.wheelDirection=Radrichtung;
 dieses.elem.dispatchEvent(evt);
 }
}

Erstellen Sie in der Datei ScrollBar.js eine Bildlaufleiste und bedienen Sie die Bildlaufleiste:

importiere Utils aus „./Utils.js“;
Menü aus „./Menu.js“ importieren;
exportiere Standardklasse ScrollBar {
 Bar;
 conHöhe;
 Menühöhe;
 Radgeschwindigkeit=6;
 BalkenOben=0;
 statische SET_BAR_HEIGHT="Balkenhöhe_festlegen";
 Konstruktor(übergeordnet) {
 dieser.container = übergeordnetes Element;
 dieses.menuUl=dieses.container.firstElementChild;
 dies.elem = dies.createElem();
 //Auf das Klickereignis des Menüs hören und die Höhe der Bildlaufleiste dynamisch ändern document.addEventListener(ScrollBar.SET_BAR_HEIGHT,()=>this.setBarHeight());
 //ul-Menü wartet auf Radereignisse this.menuUl.addEventListener(Menu.MOUSE_WHEEL_EVENT,e=>this.mouseWheelHandler(e));
 }
 erstelleElement() {
 wenn (dieses.elem) dieses.elem zurückgeben;
 //Erstellen Sie den äußeren Container der Bildlaufleiste let div = Utils.createE("div", {
  Breite: "8px",
  Höhe: "100%",
  Position: "absolut",
  rechts: "0px",
  oben: "0px",
 })
 dies.createBar(div);
 div zurückgeben;
 }
 anhängenAn(übergeordnet) {
 Utils.appendTo(dieses.Element,übergeordnet);
 }
 erstelleLeiste(_parent) {
 wenn(diese.Leiste) diese.Leiste zurückgibt;
 //Bildlaufleiste erstellen this.bar = Utils.createE("div", {
  Breite: "100%",
  Position: "absolut",
  links: "0px",
  oben: "0px",
  Rahmenradius: "10px",
  Hintergrundfarbe: "rgba(255,0,0,.5)"
 })
 //Stil des Hover-Status der Bildlaufleiste festlegen this.bar.addEventListener("mouseenter",e=>this.setMouseStateHandler(e));
 this.bar.addEventListener("mouseleave",e=>this.setMouseStateHandler(e));
 //Höhe der Bildlaufleiste festlegen this.setBarHeight();
 //Auf Mausziehereignisse warten this.mouseHand = e => this.mouseHandler(e);
 this.bar.addEventListener("Maus gedrückt", this.mouseHand);
 Utils.appendTo(diese.Leiste, _übergeordnet);
 }
 setzeBalkenhöhe() {
 //Die Höhe des äußeren übergeordneten Containers this.conHeight = this.container.clientHeight;
 //Die tatsächliche Inhaltshöhe this.menuHeight = this.container.firstElementChild.scrollHeight;
 //Wenn die tatsächliche Inhaltshöhe geringer ist als die Höhe des übergeordneten Containers, wird die Bildlaufleiste ausgeblendet, wenn (this.conHeight >= this.menuHeight) this.bar.style.display = "none";
 sonst this.bar.style.display = "Block";
 //Höhe der Bildlaufleiste berechnen let h = Math.floor(this.conHeight / this.menuHeight * this.conHeight);
 diese.Leiste.Stil.Höhe = h + "px";
 }
 setMouseStateHandler(e){
 //Stil des Hover-Status der Bildlaufleiste festlegen if (e.type == = "mouseenter") {
  this.bar.style.backgroundColor="rgba(255,0,0,1)";
 }anders{
  this.bar.style.backgroundColor="rgba(255,0,0,.5)";
 }
 }
 MausHandler(e) {
 Schalter (e.Typ) {
  Fall „mousedown“:
  e.preventDefault();
  dies.y = e.offsetY;
  document.addEventListener("Mausbewegung", this.mouseHand);
  document.addEventListener("mouseup", this.mouseHand);
  brechen;
  Fall "Mausbewegung":
  //Hinweis: Im von getBoundingClientRect() zurückgegebenen Ergebnis enthalten Breite und Höhe beide einen Rahmen. var rect = this.container.getBoundingClientRect();
  this.barTop = e.clientY - rect.y - this.y;
  //Bewegung der Bildlaufleiste this.barMove();
  brechen;
  Fall "mouseup":
  document.removeEventListener("Mausbewegung", this.mouseHand);
  document.removeEventListener("mouseup", this.mouseHand);
  brechen;
 }
 }
 MausradHandler(e){
 //Rollenereignis if(e.wheelDirection==="down"){
  //Nach unten scrollen, Menüinhalt geht nach oben this.barTop+=this.wheelSpeed;
 }anders{
  dies.barTop-=diese.wheelSpeed;
 }
 //Bewegung der Bildlaufleiste this.barMove();
 }
 barMove(){
 wenn (this.barTop < 0) this.barTop = 0;
 wenn (diese.Leistenoberseite > diese.ConHeight - diese.Leistenversatzhöhe) diese.Leistenoberseite = diese.ConHeight - diese.Leistenversatzhöhe;
 diese.bar.style.top = diese.barTop + "px";
 //Menüinhalt scrollen this.menuMove();
 }
 MenüVerschieben(){
 //Scrollhöhe des Inhalts berechnen let menuTop=this.barTop/(this.conHeight-this.bar.offsetHeight)*(this.menuHeight-this.conHeight);
 dies.menuUl.style.top=-menuTop+"px";
 }
}

Die Datei Utils.js ist ein Toolkit:

exportiere Standardklasse Utils{
 statisch erstellenE(Element,Stil,Vorbereitung){
 elem = Dokument.Element erstellen(elem);
 wenn (Stil) für (let prop in Stil) elem.style[prop]=style[prop];
 wenn (Vorbereitung) für (let prop in prep) elem[prop]=prep[prop];
 Rücklaufelement;
 }
 statisches Anhängen an (Element, übergeordnetes Element) {
 wenn (übergeordneter.Konstruktor === String) übergeordnetes Element = document.querySelector(übergeordnetes Element);
 übergeordnetes Element.AnhängenKind(Element);
 }
 statische Zufallszahl(min,max){
 gibt Math.floor(Math.random*(max-min)+min) zurück;
 }
 statische Zufallsfarbe (Alpha) {
 alpha=alpha||Math.random().toFixed(1);
 wenn(isNaN(alpha)) alpha=1;
 wenn (Alpha>1) Alpha = 1;
 wenn (alpha<0) alpha=0;
 Lassen Sie col="rgba(";
 für (lass i = 0; i < 3; i++) {
  col+=Utils.randomNum(0,256)+",";
 }
 col+=alpha+")";
 Rückspalte;
 }
 statisches insertCss(Auswählen,Stile){
 wenn(document.styleSheets.length===0){
  let styleS = Utils.createE("Stil");
  Utils.appendTo(styleS,document.head);
 }
 let styleSheet = Dokument.styleSheets[Dokument.styleSheets.Länge-1];
 Lassen Sie str = auswählen + "{";
 für (var prop in Stilen) {
  str+=prop.replace(/[AZ]/g,function(item){
  return "-"+item.toLocaleLowerCase();
  })+":"+Stile[Eigenschaft]+";";
 }
 str+="}"
 styleSheet.insertRule(str,styleSheet.cssRules.length);
 }
 statisch getIdElem(elem,obj){
 wenn(elem.id) obj[elem.id]=elem;
 wenn (elem.children.length===0) returniere obj;
 für (lass i = 0; i < Element. Kinder. Länge; i ++) {
  Utils.getIdElem(elem.children[i],obj);
 }
 }
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Implementieren einer benutzerdefinierten Bildlaufleiste mit nativem JS
  • js realisiert das automatische Scrollen der Bildlaufleiste
  • Vue.js Desktop benutzerdefinierte Bildlaufleiste Komponente Verschönerung Bildlaufleiste VScroll
  • Benutzerdefinierter JS-Bildlaufleisteneffekt
  • JavaScript implementiert ein einfaches Chat-Dialogfeld (mit Bildlaufleiste)
  • Implementierung einer benutzerdefinierten JS-Bildlaufleiste mithilfe des JS-Radereignisses
  • JS implementiert Scrollbar-Boden, um mehr zu laden
  • Verwenden von js zum Implementieren einer einfachen Bildlaufleisten-Prozessanalyse
  • layer.js - Beispiel zum Ausblenden der Bildlaufleiste öffnen
  • Vue pure js überwacht das Beispiel der Bildlaufleiste nach unten
  • JavaScript ermittelt die Position der Bildlaufleiste und verschiebt die Seite zum Ankerpunkt

<<:  Die gleichzeitige Ausführung unter Linux ist einfach. Gehen Sie dazu einfach wie folgt vor

>>:  Ubuntu 15.04 öffnet den MySQL-Remote-Port 3306

Artikel empfehlen

Einfache Zusammenfassung der Methoden zur Leistungsoptimierung von Tomcat

Tomcat selbst optimieren Tomcat-Speicheroptimieru...

Detaillierte Schritte zum Bereitstellen eines Tomcat-Servers basierend auf IDEA

Inhaltsverzeichnis Einführung Schritt 1 Schritt 2...

So leeren Sie den Cache nach der Verwendung von Keep-Alive in Vue

Was ist Keepalive? Bei der normalen Entwicklung m...

Wenn Navicat eine Verbindung zu MySQL herstellt, meldet es 10060, 1045 Fehler und den Speicherort von my.ini

Navicat meldet beim Verbinden mit der Datenbank d...

So deaktivieren Sie Webseitenstile mit dem Webentwickler von Firefox

Voraussetzung: Das Webentwickler-Plugin wurde inst...

Einige Vorschläge zur Linux-Systemoptimierung (Kerneloptimierung)

Swap deaktivieren Wenn auf dem Server ein Datenba...

MySQL verwendet Variablen, um verschiedene Sortierungen zu implementieren

Kerncode -- Im Folgenden werde ich die Implementi...

Analyse der Linux-Konfiguration zur Realisierung eines schlüssellosen Anmeldevorgangs

1.ssh-Befehl Unter Linux können Sie sich über den...

960 Grid System – Grundprinzipien und Verwendung

Natürlich gibt es auch viele Leute, die die gegent...

Detaillierte Erläuterung der langsamen MySQL-Protokollabfrage

Langsame Protokollabfragefunktion Die Hauptfunkti...

Acht gängige SQL-Verwendungsbeispiele in MySQL

Vorwort MySQL setzte auch 2016 seinen starken Wac...

Ein Tutorial für Anfänger zur Installation und Anmeldung bei mysql-8.0.19-winx64 (unbedingt für Anfänger lesen)

Inhaltsverzeichnis 1. Laden Sie das Installations...

Detaillierte Erläuterung der Tomcat-Konfigurations- und Optimierungslösungen

Service.xml Die Konfigurationsdatei Server.xml wi...

So lösen Sie das Problem, dass absolut positionierte Elemente in IE6/7 auf mysteriöse Weise verschwinden oder blockiert werden

1. Wenn die Breite der angrenzenden schwebenden Eb...

Beispiele für Clearfix und Clear

In diesem Artikel wird hauptsächlich die Verwendun...