DTE :]

Wednesday, March 6, 2013

JavaScript Custom Vertical Scrollbar

Cara kerja manipulasi scrollbar ini bukan dengan cara menghilangkan scrollbar yang asli dan menggantinya dengan yang baru, melainkan hanya menyembunyikan scrollbar asli 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 asli akan dengan mudah 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 diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 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 diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 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 diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 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 diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 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 diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 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>

Lihat Demo

Referensi: Script Tutorials – Custom Scrollbars (dengan beberapa perubahan dan peniadaan fitur yang tidak terlalu penting).

Labels: ,

posted by Taufik Nurrohman at March 06, 2013

9 Comments:

Post a Comment



<< Home