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

So zeigen Sie den Kennwortablauf unter Linux an und konfigurieren ihn

Mit den richtigen Einstellungen können Sie Linux-...

Detaillierte Erklärung der Set-Datenstruktur von JavaScript

Inhaltsverzeichnis 1. Was ist Set 2. Konstruktor ...

JavaScript realisiert den Warteschlangenstrukturprozess

Inhaltsverzeichnis 1. Warteschlangen verstehen 2....

So löschen Sie Dateinamen oder Verzeichnisse mit Sonderzeichen in Linux

Löschen einer Datei anhand ihrer Inode-Nummer Ver...

Einführung in gängige Befehle und Tastenkombinationen in Linux

Inhaltsverzeichnis 1 Systemeinführung 2 Systemver...

Detaillierte Erläuterung der Einführung in die JavaScript-Funktion

Inhaltsverzeichnis Funktionseinführung Funktion E...

Analyse der schlechten Leistung, die durch einen großen LIMIT-Offset in der MySQL-Abfrage verursacht wird

Vorwort Wir alle wissen, dass MySQL-Abfragen den ...

So verwenden Sie Docker zum Bereitstellen von Spring Boot und zum Herstellen einer Verbindung mit Skywalking

Inhaltsverzeichnis 1. Übersicht 1. Einführung ins...

Teilen Sie 13 grundlegende Syntax von Typescript

Inhaltsverzeichnis 1. Was ist Ts 2. Grundlegende ...

Lösung für die lange Verzögerung der MySQL-Datenbank-Master-Slave-Replikation

Vorwort Die Verzögerung der MySQL Master-Slave-Re...

Ein genauerer Blick auf SQL-Injection

1. Was ist SQL-Injection? SQL-Injection ist eine ...

Implementierung der Nginx-Konfiguration für den Multi-Port- und Multi-Domain-Name-Zugriff

Um mehrere Sites auf einem Server bereitzustellen...

HTML-Code einer Webseite: Erzeugung von Lauftext

In diesem Abschnitt beschreibt der Autor die spez...

Docker stellt über einen Port eine Verbindung zu einem Container her

Docker-Container-Verbindung 1. Netzwerk-Port-Mapp...

CSS löst das Problem der Front-End-Bildverformung perfekt

Ich habe in der Toutiao IT School einen Artikel g...