Scrollbar

Ende der 1990er Jahre habe ich zum ersten Mal einen Scrollbalken in HTML programmiert. Das ist gut gelungen, obwohl ich damals noch nichts von addEventListener wusste, bzw. nicht sicher bin, ob man sie zu der Zeit überhaupt schon verwenden konnte.

Da ich mich nicht mehr an die technische Umsetzung erinnere, habe ich den Scrollbalken kurzerhand noch einmal neu programmiert Ich bin mir sicher, dass sich das Ganze noch deutlich eleganter lösen ließe, aber ganz ehrlich: Es hat mir Spaß gemacht, auch wenn ich ihn heute nicht produktiv einsetzen würde und stattdessen die Arbeit mit iframe oder overflow-y:auto empfehle.

Trotzdem hat es mir Spaß gemacht.

Natürlich habe ich es so programmiert, dass es ohne Anpassung funktioniert, unabhängig davon, wieviel Text im Div steht.
Siehe const factor = textLayerHoehe/scrollbarHoehe; ... newHeight = y*factor;

Wenn Ihr Anregungen oder Kommentare zu dem Scrollbalken habt, seid so nett und kontaktiert mich unter: Kontakt

Kopiert Euch gerne den Code und probiert es aus: Code

Beispiel

Und los geht's
Der flinke Frosch Friedrich fraß freitags fröhlich fünf frische Fruchtfliegen und fragte danach feierlich, ob vielleicht jemand für ihn einen Fluss mit mehr Fischen und weniger Stress reservieren könne. Die Gänse gackerten gelassen, während die Katze Karla kopfschüttelnd auf dem Zaun saß und sich dachte, dass dieser Frosch eindeutig zu viel Freizeit habe. Im Hintergrund klingelte ein Wecker, der eigentlich niemandem gehörte, und ein Keks fiel vom Tisch, was die Stimmung sofort als dramatisch, aber dennoch köstlich beschreiben ließ. Dabei wusste natürlich niemand so genau, warum.
Der flinke Frosch Friedrich fraß freitags fröhlich fünf frische Fruchtfliegen und fragte danach feierlich, ob vielleicht jemand für ihn einen Fluss mit mehr Fischen und weniger Stress reservieren könne. Die Gänse gackerten gelassen, während die Katze Karla kopfschüttelnd auf dem Zaun saß und sich dachte, dass dieser Frosch eindeutig zu viel Freizeit habe. Im Hintergrund klingelte ein Wecker, der eigentlich niemandem gehörte, und ein Keks fiel vom Tisch, was die Stimmung sofort als dramatisch, aber dennoch köstlich beschreiben ließ. Dabei wusste natürlich niemand so genau, warum.
Der flinke Frosch Friedrich fraß freitags fröhlich fünf frische Fruchtfliegen und fragte danach feierlich, ob vielleicht jemand für ihn einen Fluss mit mehr Fischen und weniger Stress reservieren könne. Die Gänse gackerten gelassen, während die Katze Karla kopfschüttelnd auf dem Zaun saß und sich dachte, dass dieser Frosch eindeutig zu viel Freizeit habe. Im Hintergrund klingelte ein Wecker, der eigentlich niemandem gehörte, und ein Keks fiel vom Tisch, was die Stimmung sofort als dramatisch, aber dennoch köstlich beschreiben ließ. Dabei wusste natürlich niemand so genau, warum.
Der flinke Frosch Friedrich fraß freitags fröhlich fünf frische Fruchtfliegen und fragte danach feierlich, ob vielleicht jemand für ihn einen Fluss mit mehr Fischen und weniger Stress reservieren könne. Die Gänse gackerten gelassen, während die Katze Karla kopfschüttelnd auf dem Zaun saß und sich dachte, dass dieser Frosch eindeutig zu viel Freizeit habe. Im Hintergrund klingelte ein Wecker, der eigentlich niemandem gehörte, und ein Keks fiel vom Tisch, was die Stimmung sofort als dramatisch, aber dennoch köstlich beschreiben ließ. Dabei wusste natürlich niemand so genau, warum.

Code


HTML:

<div class="fenster-wrapper flex">
	<div class="text-layer">
		<div class="text-block">
			Hier kommt der Text rein
		</div>
	</div>
	<div class="scrollbar">
		<div class="scroll-elment">
			 
		</div>
	</div>
</div>



CSS:

.fenster-wrapper{
	width: 600px;
	height: 400px;
	border:1px solid red;
	margin:50px auto;
}

.flex {
	display: flex;
}

.text-layer{
	width:590px;
	height:100%;
	overflow:hidden;
	border:1px solid green;
}
	.text-block{
		position:relative;
		top:0;
		width:100%;
		height:auto;
		padding:8px;
		border:1px solid yellow;
	}

.scrollbar{
	width:10px;
	height: 400px;
	overflow:hidden;
	border:1px solid navy;
}
	.scroll-elment{
		position:relative;
		top:0;
		width:10px;
		height:35px;
		background-color:navy;
		cursor:grab;
		
	}



JavaScript:

window.addEventListener('load', function(){

 const scroll_element = document.querySelector('.scroll-elment');
 const scrollbar = document.querySelector('.scrollbar');
 const textBlock	= document.querySelector('.text-block');
 const textLayer = document.querySelector('.text-block');
 let rect = 0;
 let mouseY = 0;
 // Hoehe der Scrollbar
 const scrollbarHoehe = scrollbar.offsetHeight; 			
 // Hoehe des Divs in dem der Text steht
 const textLayerHoehe = textLayer.offsetHeight; 
 // Hoehe des Scrollelements auslesen
 const scrollelemHoehe = scroll_element.offsetHeight; 	
 // Faktor um wieviel px muss der Text nach Oben gescrollt werden 
 const factor = textLayerHoehe/scrollbarHoehe; 		
 // Das Ende definieren für Unten
 const ende = scrollbarHoehe-scrollelemHoehe;
 // Hoehe des Scrollers ermitteln
 const scroller_height = scroll_element.offsetHeight; 
 // Die Höhe halbieren
 const scrolle_half = (scroller_height/2)+4;			
		
 function textMove(y){
  newHeight = y*factor;
  textBlock.style.top = '-'+newHeight+'px';
 }	

 function handleMouseMove(ev){
  // Position & Größe der Scrollbar im Viewport
  rect   = scrollbar.getBoundingClientRect(); 
  // vertikal innerhalb der Scrollbar
  mouseY = ev.clientY - rect.top;    
  // Umwandeln in ganzzahl
  mouseY = parseInt(mouseY);
  // Damit sich die Maus besser positioniert
  mouseY -= parseInt(scrolle_half);			 

  // Wenn das Ende der Scrollbar erreicht ist darf nicht mehr gescrollt werden
  if( mouseY < ende && mouseY > 0 ){
   scroll_element.style.top = mouseY+'px';
   textMove(mouseY);
  }
 }
	
 /* EventListener zuweisen */
 scroll_element.addEventListener('mousedown', function(e){
  scroll_element.addEventListener('mousemove', handleMouseMove);
  scrollbar.addEventListener('mousemove', handleMouseMove);
  scrollbar.addEventListener('mousedown', handleMouseMove);
 });

 /* EventListener entfernen */
 scrollbar.addEventListener('mouseup', function(){
  scrollbar.removeEventListener('mousemove', handleMouseMove);
  scrollbar.removeEventListener('mousedown', handleMouseMove);
  scroll_element.removeEventListener('mousemove', handleMouseMove);
 });

 /* EventListener entfernen */
 window.addEventListener('mouseup', function(){
  scrollbar.removeEventListener('mousemove', handleMouseMove);
  scrollbar.removeEventListener('mousedown', handleMouseMove);
  scroll_element.removeEventListener('mousemove', handleMouseMove);
 });
});