Scrollbars

One of my favorite bits of website design are the scrollbars, considering how soulless the default scrollbars look nowadays. Now, you might be thinking "damn, I wish my website had the AmigaOS 1.0 (1985) scrollbar!" Fear not, because I bring you a collection of many scrollbars over the years for you to scroll your troubles away.

These are recreations and not completely accurate, but I tried my best.
Paste the codes below in your CSS to use them.


Xerox Star (Xerox 8010 Information System)

The Xerox Star workstation was released in 1981 by Xerox and it was the first personal computer to have a home page and file icons. The visuals remind me of pictures taken with a Gameboy Camera.



/* Width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color:white;
  border: 2.5px solid black;
border-left-width: 1.8px;
border-top-width: 1.8px;
}


/* Handle */
::-webkit-scrollbar-thumb {
 background-image:url(https://files.catbox.moe/evhtut.png);
background-size: 20px;
  border: 2.5px solid black;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
 background-image:url(https://files.catbox.moe/evhtut.png);
background-size: 20px;
  border: 2.5px solid black;

}      
 
/* Top button */   
::-webkit-scrollbar-button:vertical:decrement {
  background-image:url(https://files.catbox.moe/5b8aza.png);
height:89px;
background-size:27px;
border: 2.5px solid black;
}     


/* Bottom button */
::-webkit-scrollbar-button:vertical:increment {
  background-image:url(https://files.catbox.moe/2u5y5r.png);
height:89px;
background-size:27px;
border: 2.5px solid black;
}

Apple Lisa

The Apple Lisa, released in 1983, was one of Apple's biggest commercial failures. It only sold 10,000 units. It looks similar to Xerox Star.


        
/* Width */
::-webkit-scrollbar {
  width: 40px;
}

/* Track */
::-webkit-scrollbar-track {
 background-image:url(https://files.catbox.moe/evhtut.png);
background-size: 20px;
  border: 2.5px solid black;
border-top-width: 1.8px;
}
 

/* Handle */
::-webkit-scrollbar-thumb {
 background-color:white;
  border: 2.5px solid black;

}


/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
 background-image:url(https://files.catbox.moe/evhtut.png);
background-size: 20px;
  border: 2.5px solid black;

}      
   
/* Top button */    
::-webkit-scrollbar-button:vertical:decrement {
  background-image:url(https://files.catbox.moe/m4rw7q.png);
height:30px;
background-size:35px;
border: 2.5px solid black;
}     


/* Bottom button */
::-webkit-scrollbar-button:vertical:increment {
  background-image:url(https://files.catbox.moe/emf2l2.png);
height:30px;
background-size:35px;
border: 2.5px solid black;
}

System 1

Released by Apple in 1984 for the original Macintosh, it was the beggining to the classic Macintosh OS series. The scrollbar looks like a combination of the two previous ones.


        
/* Width */
::-webkit-scrollbar {
  width: 30px;
}

/* Track */
::-webkit-scrollbar-track {
 background-image:url(https://files.catbox.moe/evhtut.png);
background-size: 20px;
  border: 2.5px solid black;
border-top-width: 1.8px;
}
 

/* Handle */
::-webkit-scrollbar-thumb {
 background-color:white;
  border: 2.5px solid black;

}


/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
 background-image:url(https://files.catbox.moe/evhtut.png);
background-size: 20px;
  border: 2.5px solid black;

}      
    
/* Top button */      
::-webkit-scrollbar-button:vertical:decrement {
   background-image:url(https://files.catbox.moe/6nhjbr.png);
height:30px;
width:30px;
background-size:25px;
border: 2.5px solid black;
}     
  
/* Bottom button */      
::-webkit-scrollbar-button:vertical:increment {
 background-image:url(https://files.catbox.moe/crck2r.png);
height:30px;
width:30px;
background-size:25px;
border: 2.5px solid black;
}

AmigaOS 1.0

Amiga is a series of personal computers and the AmigaOS was released with the first Amiga in 1985. The screen looks like a gameboy color game.
Catbox isn't working so some links are from Discord.


        
  /* Width */
::-webkit-scrollbar {
width: 25px;
height: 25px;
}

/* Track */
::-webkit-scrollbar-track {
background-color:#0057b0;
background-size: 20px;
border: 3px solid white;
border-top-width: 1.8px;
}
 

/* Handle */
::-webkit-scrollbar-thumb {
 background-image: url(https://files.catbox.moe/yhhzed.png);
background-size:100%;
}

        

/* Horizontal handle */
::-webkit-scrollbar-thumb:horizontal {
 background-image: url(https://cdn.discordapp.com/attachments/986394285249269800/1018948228823130242/1552_Sem_Ttulo_20220912191621.png);
background-size:25.3px;
}



/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
 background-image:url(https://files.catbox.moe/7sians.png);
background-size: 100%;
}
        

/* Horizontal handle on hover */
::-webkit-scrollbar-thumb:horizontal:hover {
 background-image: url(https://cdn.discordapp.com/attachments/986394285249269800/1018949070317953055/1552_Sem_Ttulo_20220912191940.png);
background-size:25.3px;
}

     
/* Top button */     
::-webkit-scrollbar-button:vertical:decrement {
   background-image:url(https://files.catbox.moe/nresrd.png);
height:23px;
width:30px;
background-size:25px;
}    

     
/* Bottom button */     
::-webkit-scrollbar-button:vertical:increment {
 background-image:url(https://files.catbox.moe/oe2vvh.png);
height:23px;
width:30px;
background-size:25px;
}

To do

Back home