Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added Modern Minimalist Scrollbar #1351

Merged
merged 1 commit into from
Aug 10, 2024
+331 −0
Merged

Added Modern Minimalist Scrollbar #1351

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 54 additions & 0 deletions Components/Scrollbars/Modern-Minimalist-Scrollbar/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Scrollbar Example</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="wrapper">
<div id="container">
<div class="parent">
<h2>Modern Minimalist Scrollbar</h2>
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
Many different text. Many different text. Many different text. Many different text. Many different text.
</div>
</div>
</div>

<script src="script.js"></script>
</body>

</html>
185 changes: 185 additions & 0 deletions Components/Scrollbars/Modern-Minimalist-Scrollbar/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
var ssb = {
aConts: [],
mouseY: 0,
N: 0,
asd: 0, /*active scrollbar element*/
sc: 0,
sp: 0,
to: 0,

// constructor
scrollbar: function (cont_id) {
var cont = document.getElementById(cont_id);

// perform initialization
if (!ssb.init()) return false;

var cont_clone = cont.cloneNode(false);
cont_clone.style.overflow = "hidden";
cont.parentNode.appendChild(cont_clone);
cont_clone.appendChild(cont);
cont.style.position = 'absolute';
cont.style.left = cont.style.top = '0px';
cont.style.width = cont.style.height = '100%';

// adding new container into array
ssb.aConts[ssb.N++] = cont;

cont.sg = false;

//creating scrollbar child elements
cont.st = this.create_div('ssb_st', cont, cont_clone);
cont.sb = this.create_div('ssb_sb', cont, cont_clone);
cont.su = this.create_div('ssb_up', cont, cont_clone);
cont.sd = this.create_div('ssb_down', cont, cont_clone);

// on mouse down processing
cont.sb.onmousedown = function (e) {
if (!this.cont.sg) {
if (!e) e = window.event;

ssb.asd = this.cont;
this.cont.yZ = e.screenY;
this.cont.sZ = cont.scrollTop;
this.cont.sg = true;

// new class name
this.className = 'ssb_sb ssb_sb_down';
}
return false;
}
// on mouse down on free track area - move our scroll element too
cont.st.onmousedown = function (e) {
if (!e) e = window.event;
ssb.asd = this.cont;

ssb.mouseY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
for (var o = this.cont, y = 0; o != null; o = o.offsetParent) y += o.offsetTop;
this.cont.scrollTop = (ssb.mouseY - y - (this.cont.ratio * this.cont.offsetHeight / 2) - this.cont.sw) / this.cont.ratio;
this.cont.sb.onmousedown(e);
}

// onmousedown events
cont.su.onmousedown = cont.su.ondblclick = function (e) { ssb.mousedown(this, -1); return false; }
cont.sd.onmousedown = cont.sd.ondblclick = function (e) { ssb.mousedown(this, 1); return false; }

//onmouseout events
cont.su.onmouseout = cont.su.onmouseup = ssb.clear;
cont.sd.onmouseout = cont.sd.onmouseup = ssb.clear;

// on mouse over - apply custom class name: ssb_sb_over
cont.sb.onmouseover = function (e) {
if (!this.cont.sg) this.className = 'ssb_sb ssb_sb_over';
return false;
}

// on mouse out - revert back our usual class name 'ssb_sb'
cont.sb.onmouseout = function (e) {
if (!this.cont.sg) this.className = 'ssb_sb';
return false;
}

// onscroll - change positions of scroll element
cont.ssb_onscroll = function () {
this.ratio = (this.offsetHeight - 2 * this.sw) / this.scrollHeight;
this.sb.style.top = Math.floor(this.sw + this.scrollTop * this.ratio) + 'px';
}

// scrollbar width
cont.sw = 12;

// start scrolling
cont.ssb_onscroll();
ssb.refresh();

// binding own onscroll event
cont.onscroll = cont.ssb_onscroll;
return cont;
},

// initialization
init: function () {
if (window.oper || (!window.addEventListener && !window.attachEvent)) { return false; }

// temp inner function for event registration
function addEvent(o, e, f) {
if (window.addEventListener) { o.addEventListener(e, f, false); ssb.w3c = true; return true; }
if (window.attachEvent) return o.attachEvent('on' + e, f);
return false;
}

// binding events
addEvent(window.document, 'mousemove', ssb.onmousemove);
addEvent(window.document, 'mouseup', ssb.onmouseup);
addEvent(window, 'resize', ssb.refresh);
return true;
},

// create and append div finc
create_div: function (c, cont, cont_clone) {
var o = document.createElement('div');
o.cont = cont;
o.className = c;
cont_clone.appendChild(o);
return o;
},
// do clear of controls
clear: function () {
clearTimeout(ssb.to);
ssb.sc = 0;
return false;
},
// refresh scrollbar
refresh: function () {
for (var i = 0, N = ssb.N; i < N; i++) {
var o = ssb.aConts[i];
o.ssb_onscroll();
o.sb.style.width = o.st.style.width = o.su.style.width = o.su.style.height = o.sd.style.width = o.sd.style.height = o.sw + 'px';
o.sb.style.height = Math.ceil(Math.max(o.sw * .5, o.ratio * o.offsetHeight) + 1) + 'px';
}
},
// arrow scrolling
arrow_scroll: function () {
if (ssb.sc != 0) {
ssb.asd.scrollTop += 6 * ssb.sc / ssb.asd.ratio;
ssb.to = setTimeout(ssb.arrow_scroll, ssb.sp);
ssb.sp = 32;
}
},

/* event binded functions : */
// scroll on mouse down
mousedown: function (o, s) {
if (ssb.sc == 0) {
// new class name
o.cont.sb.className = 'ssb_sb ssb_sb_down';
ssb.asd = o.cont;
ssb.sc = s;
ssb.sp = 400;
ssb.arrow_scroll();
}
},
// on mouseMove binded event
onmousemove: function (e) {
if (!e) e = window.event;
// get vertical mouse position
ssb.mouseY = e.screenY;
if (ssb.asd.sg) ssb.asd.scrollTop = ssb.asd.sZ + (ssb.mouseY - ssb.asd.yZ) / ssb.asd.ratio;
},
// on mouseUp binded event
onmouseup: function (e) {
if (!e) e = window.event;
var tg = (e.target) ? e.target : e.srcElement;
if (ssb.asd && document.releaseCapture) ssb.asd.releaseCapture();

// new class name
if (ssb.asd) ssb.asd.sb.className = (tg.className.indexOf('scrollbar') > 0) ? 'ssb_sb ssb_sb_over' : 'ssb_sb';
document.onselectstart = '';
ssb.clear();
ssb.asd.sg = false;
}
}

window.onload = function () {
ssb.scrollbar('container'); // scrollbar initialization
}
78 changes: 78 additions & 0 deletions Components/Scrollbars/Modern-Minimalist-Scrollbar/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
body {
background: #f5fffa;
margin: 0;
padding: 0;
}

.wrapper {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #FFF;
border: 1px #000 solid;
margin: 20px auto;
padding: 15px;
position: relative;
width: 600px;
height: 600px;
}

#container {
width: 580px;
height: 580px;
padding: 5px;
margin-top: 5px;
overflow: auto;
position: relative;
}

.ssb_down {
background-color: #33ccaa;
bottom: 0;
cursor: pointer;
position: absolute;
right: 0;
border-radius: 10px;
}

.ssb_sb {
background-color: #22aabb;
cursor: pointer;
position: absolute;
right: 0;
border-radius: 10px;
}

.ssb_sb_down {
background-color: #1199aa;
}

.ssb_sb_over {
background-color: #33bbcc;
}

.ssb_st {
background-color: #dedede;
cursor: pointer;
height: 100%;
position: absolute;
right: 0;
top: 0;
border-radius: 10px;
}

.ssb_up {
background-color: #33ccaa;
cursor: pointer;
position: absolute;
right: 0;
top: 0;
border-radius: 10px;
}

.parent {
font-family: verdana;
height: 100%;
padding: 10px;
position: relative;
}
14 changes: 14 additions & 0 deletions assets/html_files/scrollbars.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,20 @@ <h2>Hmmm, we are not getting any result. <br> Our bad - Please try another searc
</div>

<div class="contain">
<div class="box">
<h1>Modern Minimalist Scrollbar</h1>
<div class="preview">
<a href="../../Components/Scrollbars/Modern-Minimalist-Scrollbar/index.html" title="Live Preview" target="_blank">
<img src="../images/link.png">
</a>
</div>
<div class="source">
<a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Scrollbars/Modern-Minimalist-Scrollbar" title="Source Code" target="_blank">
<img src="../images/github.png">
</a>
</div>
</div>

<div class="box">
<h1>Rainbow Scrollbar</h1>
<div class="preview">
Expand Down