Cara kerja manipulasi scrollbar ini bukan dengan cara menghilangkan scrollbar yang orisinil dan menggantinya dengan yang baru, melainkan hanya menyembunyikan scrollbar orisinil tersebut di balik/di belakang scrollbar palsu yang kita ciptakan di atasnya. Jika Anda menghilangkan warna latar pada scrollbar buatan ini, maka elemen scrollbar yang orisinil akan dengan gampang terlihat:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript Custom Vertical Scrollbar</title> <style> .scroll-area-wrapper { width:80%; margin:50px auto; } .scroll-area { overflow:auto; padding-right:1em; position:relative; } .scrollbar-track, .scrollbar-arrow-up, .scrollbar-arrow-down, .scrollbar-thumb {position:absolute} /* scrollbar track */ .scrollbar-track { background-color:#ccc; top:0; right:0; bottom:0; } /* scrollbar thumb */ .scrollbar-thumb { background-color:#eee; cursor:pointer; position:absolute; right:0; } /* up & down arrow */ .scrollbar-arrow-up, .scrollbar-arrow-down { background-color:#eee; cursor:pointer; right:0; } .scrollbar-arrow-up {top:0} .scrollbar-arrow-down {bottom:0} .scrollbar-arrow-up:before, .scrollbar-arrow-down:before { content:""; display:block; position:absolute; border:4px solid transparent; left:50%; margin-left:-4px; } .scrollbar-arrow-up:before { border-bottom-color:#aaa; top:50%; margin-top:-6px; } .scrollbar-arrow-down:before { border-top-color:#aaa; bottom:50%; margin-bottom:-6px; } /* hover state */ .scrollbar-arrow-up:hover, .scrollbar-arrow-down:hover, .scrollbar-thumb:hover {background-color:#ddd} </style> <script> 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_outer = document.createElement('div'); cont_outer.style.overflow = 'hidden'; cont_outer.style.position = 'relative'; cont.parentNode.appendChild(cont_outer); cont_outer.appendChild(cont); cont_outer.style.height = cont.offsetHeight + 'px'; cont.style.position = 'relative'; cont.style.top = '0px'; 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('scrollbar-track', cont, cont_outer); cont.sb = this.create_div('scrollbar-thumb', cont, cont_outer); cont.su = this.create_div('scrollbar-arrow-up', cont, cont_outer); cont.sd = this.create_div('scrollbar-arrow-down', cont, cont_outer); // 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; } 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; // 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 = 18; // start scrolling cont.ssb_onscroll(); ssb.refresh(); // binding own onscroll event cont.onscroll = cont.ssb_onscroll; return cont; }, // initialization init: function () { if (window.opera || (! 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_outer) { var o = document.createElement('div'); o.cont = cont; o.className = c; cont_outer.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 * 0.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) { 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(); document.onselectstart = ''; ssb.clear(); ssb.asd.sg = false; } }; </script> </head> <body> <div class="scroll-area-wrapper"> <div class="scroll-area" id="scroll-area-1" style="height:400px;"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed membisu nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam dekat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed membisu nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam dekat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed membisu nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam dekat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed membisu nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam dekat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed membisu nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam dekat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> </div> </div> <script> ssb.scrollbar('scroll-area-1'); // scrollbar initialization with element ID </script> </body> </html>Referensi: Script Tutorials – Custom Scrollbars (dengan beberapa perubahan dan pembatalan fitur yang tidak terlalu penting).
Sumber https://www.dte.web.id/