retro scroll

Tags: scroll, retro

Description:

just another scroll to use I hope you use

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Madoque (https://layouts.spacehey.com/layout?id=27112) -->

<center> <style>
.scroll {
width: 200px;
height: 100px;
overflow: scroll;
overflow-x: hidden;
overflow-y: scroll;
}
.scroll::-webkit-scrollbar {
width: 16px;
height: 16px;
}

.scroll::-webkit-scrollbar-track {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
image-rendering: pixelated;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

.scroll::-webkit-scrollbar-track:active {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

.scroll::-webkit-scrollbar-thumb {
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
width: 16px;
height: 16px;
background-color: #cccccc;
z-index: 1;
}

.scroll::-webkit-scrollbar-corner {
background-color: #cccccc;
}

.scroll::-webkit-resizer {
width: 16px;
height: 16px;
background-color: #cccccc;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
background-position: bottom right;
background-repeat: no-repeat;
image-rendering: pixelated;
}

.scroll::-webkit-scrollbar-button, .scroll::-webkit-scrollbar-button {
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
display: block;
width: 16px;
height: 16px;
background-color: #cccccc;
image-rendering: pixelated;
background-repeat: no-repeat;
background-position: center center;
}

.scroll::-webkit-scrollbar-button:active, .scroll::-webkit-scrollbar-button:active {
background-position: 2px 2px;
}

.scroll::-webkit-scrollbar-button:horizontal:decrement, .scroll::-webkit-scrollbar-button:horizontal:decrement {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
}

.scroll::-webkit-scrollbar-button:horizontal:increment, .scroll::-webkit-scrollbar-button:horizontal:increment {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
}

.scroll::-webkit-scrollbar-button:vertical:decrement, .scroll::-webkit-scrollbar-button:vertical:decrement {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
}

.scroll::-webkit-scrollbar-button:vertical:increment, .scroll::-webkit-scrollbar-button:vertical:increment {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
}

.scroll::-webkit-scrollbar-button:horizontal:increment:start, .scroll::-webkit-scrollbar-button:horizontal:increment:start {
display: none;
}

.scroll::-webkit-scrollbar-button:horizontal:decrement:end, .scroll::-webkit-scrollbar-button:horizontal:decrement:end {
display: none;
}

.scroll::-webkit-scrollbar-button:vertical:increment:start, .scroll::-webkit-scrollbar-button:vertical:increment:start {
display: none;
}

.scroll::-webkit-scrollbar-button:vertical:decrement:end, .scroll::-webkit-scrollbar-button:vertical:decrement:end {
display: none;
}

::-webkit-scrollbar-button:active, ::-webkit-scrollbar-button:active {
border-top: 1px solid #868a8e;
border-left: 1px solid #868a8e;
border-bottom: 1px solid #868a8e;
border-right: 1px solid #868a8e;
box-shadow: none;
}
</style>


<div class="scroll">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div></center>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 473 comments ( View all | Add Comment )

𝚒𝚍𝚔ψ𝚑𝚊𝚝𝚝𝚘𝚢𝚊𝚙	1773266974 tghiz wax very helpful, thank u! and using! Report Comment
aily	1773229441 using :) Report Comment
lynx ୨ৎ	1773151855 using tyy Report Comment
sugargliderrr	1773129400 use. ing Report Comment
sugargliderrr	1773129396 use. ing Report Comment
Untitled23	1773054271 using Report Comment
Kiwiweewe	1772972544 Thank you so much!!! Report Comment
Nina Skriňa	1772881686 using! Report Comment
Meshal	1772865669 usingg Report Comment
freakinfreak11	1772714228 using Report Comment
SHARKLY!!	1772350126 Using! Thank you! Report Comment
Tripleye_4	1772158298 using jsjs Report Comment
r>u>k>1_ruki!!	1771946444 usingg :3 Report Comment
𝒵 υr𝐲	1771667032 Using Report Comment
SpいDer–MえLlo	1771337103 Usssinggg!!!! Thxxx Report Comment
shelbii	1771023309 using ! Report Comment
mina	1770823462 Using Thx Report Comment
🌈<3!!!!	1770764089 THIS IS SOO COOLLL, usingg ^_^ Report Comment
Vivian	1770585496 using >:3 Report Comment
al1cja_Ang3lduztXxx	1770373855 so cute!! defo using this Report Comment