* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
p {
margin-bottom: 10px;
margin-top: 10px;
color: white;
}
html,
body {
max-width: 100vw;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
scrollbar-color: #465071 #587bbe;
font-family: "Verdana", sans-serif;
font-size: 10px;
background-color: #cccccc;
color: black;
cursor: default;
}
#paintbox {
display: inline-block;
position: absolute;
max-width: 900px;
max-height: 600px;
border-right: grey 1px solid;
outline: white 1px solid;
outline-style: outset;
outline-offset: -2px;
border-right: 1px black solid;
border-top: 1px #dedfde solid;
border-left: 1px #dedfde solid;
border-bottom: 1px black solid;
background-color: #bdbebd;
z-index: 9;
top: 10px;
left: 0;
}
.resizable {
overflow: hidden;
resize: both;
min-width: 750px;
min-height: 517px;
}
#paintboxwindowtitle {
display: block;
position: absolute;
width: 99%;
height: 18px;
top: 3px;
left: 3px;
background-color: #00007b;
cursor: move;
z-index: 10;
}
#paintboxwindowtitle p {
margin-top: -3px;
margin-bottom: 10px;
margin-left: 1px;
font-size: 19px;
color: white;
font-family: "dia";
letter-spacing: 0.25px;
}
#paintboxwindowtitle img {
margin-bottom: 0;
margin-left: 1px;
margin-right: 3px;
}
.minmaxclose {
display: block;
position: absolute;
width: 75px;
height: 18px;
top: 3px;
right: 3px;
background-color: #000082;
z-index: 11;
}
.buttonclose {
display: block;
position: absolute;
top: 2px;
right: 2px;
width: 16px;
height: 14px;
background-color: #bdbebd;
border-right: grey 1px solid;
outline: #dfdfdf 1px solid;
outline-style: outset;
outline-offset: -2px;
border-right: 1px black solid;
border-top: 1px white solid;
border-left: 1px white solid;
border-bottom: 1px black solid;
text-align: center;
}
.buttonclose:active {
display: block;
position: absolute;
top: 2px;
right: 2px;
width: 16px;
height: 14px;
background-color: #bdbebd;
border-right: grey 1px solid;
outline: #dfdfdf 1px solid;
outline-style: inset;
outline-offset: -2px;
border-left: 1px black solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
border-top: 1px black solid;
text-align: center;
}
.buttonmax {
display: block;
position: absolute;
top: 2px;
right: 20px;
width: 16px;
height: 14px;
background-color: #bdbebd;
border-right: grey 1px solid;
outline: #dfdfdf 1px solid;
outline-style: outset;
outline-offset: -2px;
border-right: 1px black solid;
border-top: 1px white solid;
border-left: 1px white solid;
border-bottom: 1px black solid;
text-align: center;
font-family: "Arial";
}
.buttonmax:active {
display: block;
position: absolute;
top: 2px;
right: 20px;
width: 16px;
height: 14px;
background-color: #bdbebd;
border-right: grey 1px solid;
outline: #dfdfdf 1px solid;
outline-style: inset;
outline-offset: -2px;
border-left: 1px black solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
border-top: 1px black solid;
text-align: center;
font-family: "Arial";
}
.buttonmin {
display: block;
position: absolute;
top: 2px;
right: 36px;
width: 16px;
height: 14px;
background-color: #bdbebd;
border-right: grey 1px solid;
outline: #dfdfdf 1px solid;
outline-style: outset;
outline-offset: -2px;
border-right: 1px black solid;
border-top: 1px white solid;
border-left: 1px white solid;
border-bottom: 1px black solid;
text-align: center;
}
.buttonmin:active {
display: block;
position: absolute;
top: 2px;
right: 36px;
width: 16px;
height: 14px;
background-color: #bdbebd;
border-right: grey 1px solid;
outline: #dfdfdf 1px solid;
outline-style: inset;
outline-offset: -2px;
border-left: 1px black solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
border-top: 1px black solid;
text-align: center;
}
.buttonclose p {
color: black;
margin-top: -1px;
margin-right: 0;
font-size: 8px;
text-align: center;
font-family: "pixelsansserif";
}
.buttonmax p,
.buttonmin p {
color: black;
margin-top: -7px;
margin-left: 0;
font-size: 13px;
text-align: center;
font-family: "pixelsansserif";
}
.filetab {
display: block;
position: absolute;
width: 100%;
height: 20px;
top: 24px;
margin-left: 9px;
}
.filetab a {
margin-right: 9px;
color: black;
text-decoration: none;
font-family: "w95a";
font-size: 12px;
letter-spacing: 0.35px;
}
.paintinner {
display: block;
position: absolute;
top: 41px;
}
.canvas {
display: block;
position: relative;
min-width: 600px;
left: 4px;
max-height: 400px;
outline: black 1px solid;
outline-style: inset;
outline-offset: -2px;
border-left: 1px #7b7b7b solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
border-top: 1px #7b7b7b solid;
background-color: white;
color: black;
margin-right: 7px;
overflow: hidden;
box-shadow: inset 0 2px 0 0 black, inset 2px 0 0 0 black;
}
.canvastext {
left: 0;
top: 0;
padding-left: 5px;
padding-bottom: 25px;
padding-right: 20px;
margin-top: 4px;
min-width: 600px;
max-height: 400px;
font-family: "w95a";
font-size: 1.5em;
overflow: scroll;
text-align: justify;
}
.canvastext p {
color: black;
text-align: justify;
margin-top: 4px;
}
.scrollbarvertical {
display: block;
position: absolute;
float: right;
width: 16px;
height: calc(100% - 18px);
top: 2px;
right: 1px;
border-bottom: black 1px solid;
background-color: #bdbebd;
background-image: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/transparent%20bg.gif");
}
.scrollbarhorizontal {
display: block;
position: absolute;
width: calc(100% - 18px);
height: 16px;
bottom: 1px;
margin-left: 2px;
margin-right: 16px;
border-right: black 1px solid;
background-color: #bdbebd;
background-image: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/transparent%20bg.gif");
}
.scrollblock {
display: block;
position: absolute;
right: 0;
width: 16px;
height: 16px;
background-color: #bdbebd;
bottom: 0;
}
.buttonscrollbarup {
display: inline-block;
position: relative;
width: 16px;
height: 15px;
background-color: #bdbebd;
border-left: #dedfde 1px solid;
border-right: black 1px solid;
border-bottom: none;
border-top: #dedfde 1px solid;
text-align: center;
left: 0;
top: 0;
box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}
.buttonscrollbardown {
display: inline-block;
position: absolute;
width: 16px;
height: 15px;
background-color: #bdbebd;
border-left: #dedfde 1px solid;
border-right: black 1px solid;
border-bottom: none;
border-top: #dedfde 1px solid;
text-align: center;
left: 0;
bottom: 0;
box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}
.buttonscrollbarupdown {
display: inline-block;
position: relative;
width: 16px;
min-height: 147px;
background-color: #bdbebd;
border-left: #dedfde 1px solid;
border-right: black 1px solid;
border-bottom: black 1px solid;
border-top: black 1px solid;
text-align: center;
left: 0;
top: -1px;
box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}
.buttonscrollbarleft {
display: inline-block;
position: relative;
width: 15px;
height: 16px;
background-color: #bdbebd;
border-left: #dedfde 1px solid;
border-right: none;
border-bottom: 1px black solid;
border-top: #dedfde 1px solid;
text-align: center;
left: 0;
top: 0;
box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}
.buttonscrollbarright {
display: inline-block;
position: absolute;
width: 15px;
height: 16px;
background-color: #bdbebd;
border-left: #dedfde 1px solid;
border-right: none;
border-bottom: 1px black solid;
border-top: #dedfde 1px solid;
text-align: center;
right: 0;
top: 0;
box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}
.buttonscrollbarsidetoside {
display: inline-block;
position: relative;
width: 345px;
height: 16px;
background-color: #bdbebd;
border-left: 1px black solid;
border-right: 1px black solid;
border-bottom: 1px black solid;
border-top: #dedfde 1px solid;
left: -4px;
top: -6px;
box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}
.buttonscrollbarup:active {
display: inline-block;
position: relative;
width: 16px;
height: 15px;
background-color: #bdbebd;
border-right: #7b7b7b 1px solid;
outline: #cccccc 1px solid;
outline-style: inset;
outline-offset: -2px;
border-left: 1px black solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
border-top: 1px black solid;
text-align: center;
left: 0;
top: 0;
}
.buttonscrollbardown:active {
display: inline-block;
position: absolute;
width: 16px;
height: 15px;
background-color: #bdbebd;
border-right: #7b7b7b 1px solid;
outline: #cccccc 1px solid;
outline-style: inset;
outline-offset: -2px;
border-left: 1px black solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
border-top: 1px black solid;
text-align: center;
left: 0;
bottom: 0;
}
.buttonscrollbarupdown:active {
display: inline-block;
position: relative;
width: 16px;
min-height: 147px;
background-color: #bdbebd;
border-right: #7b7b7b 1px solid;
outline: #cccccc 1px solid;
outline-style: inset;
outline-offset: -2px;
border-left: 1px black solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
border-top: 1px black solid;
left: 0;
bottom: 0;
}
.buttonscrollbarleft:active {
display: inline-block;
position: relative;
width: 15px;
height: 16px;
background-color: #bdbebd;
border-right: #7b7b7b 1px solid;
outline: #cccccc 1px solid;
outline-style: inset;
outline-offset: -2px;
border-left: 1px black solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
border-top: 1px black solid;
text-align: center;
left: 0;
top: 0;
}
.buttonscrollbarright:active {
display: inline-block;
position: absolute;
width: 15px;
height: 16px;
background-color: #bdbebd;
border-right: #7b7b7b 1px solid;
outline: #cccccc 1px solid;
outline-style: inset;
outline-offset: -2px;
border-left: 1px black solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
border-top: 1px black solid;
text-align: center;
right: 0;
top: 0;
}
.buttonscrollbarsidetoside:active {
display: inline-block;
position: relative;
width: 345px;
height: 16px;
background-color: #bdbebd;
border-right: #7b7b7b 1px solid;
outline: #cccccc 1px solid;
outline-style: inset;
outline-offset: -2px;
border-left: 1px black solid;
border-bottom: 1px white solid;
border-right: 1px white solid;
border-top: 1px black solid;
left: -4px;
top: -6px;
}
.buttonscrollbarup img,
.buttonscrollbardown img {
font-family: "w95a";
margin-bottom: 3px;
text-align: center;
}
.buttonscrollbarleft img,
.buttonscrollbarright img {
font-family: "w95a";
margin-bottom: 2px;
text-align: center;
}
.clear {
display: inline-block;
position: absolute;
width: 2px;
height: 600px;
right: 0;
top: 0;
background-color: #bdbebd;
z-index: 99;
}
<section id="content">
<div id="paintbox" class="resizable">
<div id="paintboxwindowtitle">
<p><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/paint%2016x16.gif">untitled - Paint</p>
</div>
<div class="minmaxclose">
<button class="buttonclose">
<p>X</p>
</button>
<button class="buttonmax">
<p>🗖</p>
</button>
<button class="buttonmin">
<p>🗕</p>
</button>
</div>
<div class="filetab"></div>
<div class="paintinner">
<div class="clear"></div>
<div class="itemchooser">
<div class="underinset"></div>
</div>
<div class="canvas">
<div class="canvastext">
<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Massa suscipit facilisi odio sem id dictum senectus. Maecenas eu consectetur tempus commodo integer lacus. Maecenas primis pulvinar inceptos sapien rhoncus lobortis tempus. Nisi curabitur consectetur hac mus rhoncus consectetur pulvinar. Mollis lacinia erat; pharetra dignissim parturient elementum. Platea phasellus nostra sapien tempus aptent vulputate augue.</p>
<p>Urna praesent aenean interdum habitasse sed ante. Aliquam quam eros metus dictumst; dis curabitur sed. Porta nisi nisi vestibulum; sagittis porttitor risus. Erat turpis nunc hendrerit litora nascetur fames. Nascetur integer mi ullamcorper sociosqu viverra. Aenean litora ornare suscipit donec maximus elit. Phasellus aptent mollis inceptos nullam tempor cras gravida facilisis. Fusce eget commodo luctus vel sed nascetur lacus consequat sapien. Etiam ligula taciti etiam venenatis risus.</p>
<p>Nisl tortor platea elementum eu dolor. Imperdiet efficitur enim etiam nam purus dis donec erat. Mattis ante hac etiam tempus aptent lacinia luctus turpis. Neque ridiculus efficitur nullam magna interdum purus faucibus. Consectetur pulvinar augue ultrices, per imperdiet magna habitasse ligula. Facilisis dictum laoreet litora eu tincidunt.</p>
<p>Facilisi porttitor fringilla magnis vestibulum molestie. Suscipit a ac, nullam hac purus facilisis senectus. Condimentum ut nostra hendrerit fames nascetur elit nunc consequat? Porttitor est laoreet eleifend eleifend dapibus placerat torquent ante purus. Congue auctor orci at mi vulputate felis vestibulum orci felis. Vel mattis nunc tempor magna fusce nostra. Ligula varius habitasse rutrum nostra ad nec. Sapien facilisi dignissim pretium euismod placerat pharetra.</p>
<p>Porttitor fames integer est pulvinar vivamus facilisis facilisi fringilla. Dolor gravida ex sit sem morbi. Quam class venenatis lorem; adipiscing habitasse cubilia quam. Vitae ad curabitur diam mollis mattis ut inceptos lorem ornare. Posuere eu faucibus facilisis ut commodo quisque himenaeos. Integer metus eros risus arcu fusce gravida, accumsan ultricies nunc. Nulla sociosqu lectus donec fusce dictumst tempus, tempus sagittis.</p>
<p>Magna nostra sit ut sem pulvinar porttitor ridiculus. Varius velit suspendisse elit hendrerit enim feugiat nam. Parturient mollis torquent sociosqu suspendisse faucibus sodales nulla. Iaculis mus aliquet dapibus magnis fames; cras ultricies facilisi. Vehicula montes gravida pulvinar congue ante. Nibh ridiculus consequat fusce quis ullamcorper a augue aliquam imperdiet. Lorem suscipit massa et erat sem eget. Blandit scelerisque himenaeos pulvinar cubilia nunc sociosqu morbi. Suspendisse cras etiam nec potenti, ultrices ipsum porta.</p>
<p>Nisi vel nostra pharetra nisi venenatis tincidunt non mauris. Rutrum per fermentum sollicitudin mollis pharetra pulvinar tincidunt erat. Convallis consequat quis taciti phasellus, conubia bibendum erat vehicula. Litora habitant nullam vestibulum nunc gravida volutpat integer lobortis. Leo nibh faucibus cubilia tempus cursus fringilla convallis metus. Metus viverra senectus tortor erat phasellus.</p>
<p>Curae tincidunt orci placerat sem ad. Enim libero malesuada eget leo vitae ex. Velit efficitur luctus faucibus faucibus rutrum. Quam tincidunt odio himenaeos conubia penatibus. Taciti commodo varius tellus tristique; hac scelerisque. Tempor potenti ex diam duis sed quam. Imperdiet inceptos massa ridiculus eget nec quisque dignissim potenti parturient.</p>
<p>Sagittis maximus turpis quisque rutrum nostra natoque ipsum. Fringilla aliquam luctus curabitur; vehicula vivamus cras lobortis. Facilisis nullam neque dictum vehicula metus adipiscing. Dolor senectus lacinia rhoncus etiam fermentum. Varius netus viverra curae sem fringilla rutrum fringilla mollis. Auctor interdum quisque vel cras litora.</p>
<p>Nostra litora potenti, amet erat vehicula proin lacinia. Ac dis lectus; turpis quisque eleifend sollicitudin vulputate curae. Aenean libero volutpat habitasse ullamcorper dis aliquam malesuada torquent aliquam. Nulla viverra nostra bibendum suspendisse cursus facilisis. Pellentesque tellus conubia viverra praesent lacinia. Rhoncus curae porta nam tristique taciti. Eu potenti congue, amet gravida felis facilisi nisi cubilia. Pellentesque gravida blandit felis proin luctus suscipit primis hendrerit.</p>
<div class="scrollblock"></div>
<!-- SCROLLBLOCK -->
<div class="scrollbarvertical">
<button class="buttonscrollbarup"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/up%20arrow.png"></button>
<button class="buttonscrollbarupdown"></button>
<button class="buttonscrollbardown"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/down%20arrow.png"></button>
</div>
<!-- SCROLLBAR VERT -->
<div class="scrollbarhorizontal">
<button class="buttonscrollbarleft"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/left%20arrow.png"></button>
<button class="buttonscrollbarsidetoside"></button>
<button class="buttonscrollbarright"><img src="https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/right%20arrow.png"></button>
</div>
<!-- SCROLLBAR HORI -->
</div>
</div>
</section>
I’m currently working on making a website layout that looks like the Window95 desktop with the paint window as the main window for content, and I’m trying to finish up the last (at least, I hope it’s the last…) JavaScript element and I truly have NO idea what I’m doing. What I want is for the scrolling part of the scrollbar I’ve made to, well…scroll. I’ve got the buttons for it working just fine, but the actual scrolling part is a different story. I think I’d need to use mouse events (mouseup, mousedown, and mousemove), something for the wheel aspect, as well as have the scrollbar move the actual content the way a regular scrollbar does, but I have no understanding of how to make it work 🙁 I’ve searched DOZENS of different search terms to try and find a similar problem, but I just don’t think most people want to make custom scrollbars anymore so I’ve found NOTHING that can help me.
I don’t know JavaScript at all and am really, really struggling with getting what I want to work.
I have a codepen here showing my layout so far, so I hope you can see what I’m working with. None of my scripts seem to be working in the link and I’m not sure why, but since I don’t have a script yet I’ve tried out, maybe that’s not a big deal?
I asked this question on Reddit and got a lot of responses to making a custom cursor using scrollbar-color and scrollbar-width, but to be clear that doesn’t fix my problem. What I want is to use JavaScript to make a div scroll up and down, while it also moves the content as it scrolls. I will input the code below of my coding for the scrollbar and it’s direct parent that I’m trying to make.
.scrollbarvertical {
display: block;
position: absolute;
float: right;
width: 16px;
height: calc(100% - 18px);
top: 2px;
right: 1px;
border-bottom: black 1px solid;
background-color: #bdbebd;
background-image: url("https://file.garden/ZWlUCY4S7Xz2vypS/themes/windows%2095%20paint/transparent%20bg.gif");
}
.buttonscrollbarupdown {
display: inline-block;
position: relative;
width: 16px;
background-color: #bdbebd;
border-left: #dedfde 1px solid;
border-right: black 1px solid;
border-bottom: black 1px solid;
border-top: black 1px solid;
text-align: center;
left: 0;
top: -1px;
box-shadow: inset 0 1px 0 0 white, inset 1px 0 0 0 white, inset 0 -1px 0 0 #7b7b7b, inset -1px 0 0 0 #7b7b7b;
}
Any help is greatly appreciated!!!
I’ve tried multiple different draggable scripts but none of them do what I want as I don’t want a simple draggable script, but one in which the draggable object also scrolls a text box I’ve created.
2
Answers
Can you try the code below?
I arbitrarily used the pre tag to test the horizontal scrolling.
Adjust the width and scope of the scroll bar yourself.
Javascript is responsible for the dynamic part of the web.
If you’ve built a skeleton with HTML and made it pretty with CSS, you should use Javascript to make it moveable.
It’s normal not to know at first.
It’s going to be uncomfortable, painful, and upsetting.
But it’s really cool after you solve it, right?
Have you tried using webkit-scrollbar instead of creating the scrollbar from scratch? In my opinion, it might be easier. Here’s an example of how you could try doing it: