Add Modern Minimalist Scrollbar (#1351)

Rakesh9100 · Aug 10, 2024 · fb3f71c · fb3f71c
1 parent 29fc9a9
commit fb3f71c
Show file tree

Hide file tree

Showing 4 changed files with 331 additions and 0 deletions.
diff --git a/Components/Scrollbars/Modern-Minimalist-Scrollbar/index.html b/Components/Scrollbars/Modern-Minimalist-Scrollbar/index.html
@@ -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>
diff --git a/Components/Scrollbars/Modern-Minimalist-Scrollbar/script.js b/Components/Scrollbars/Modern-Minimalist-Scrollbar/script.js
@@ -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
+}
diff --git a/Components/Scrollbars/Modern-Minimalist-Scrollbar/style.css b/Components/Scrollbars/Modern-Minimalist-Scrollbar/style.css
@@ -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;
+}
diff --git a/assets/html_files/scrollbars.html b/assets/html_files/scrollbars.html
@@ -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">