Implementing basic Slim scroll

In this article, I am going to implement a basic slim scroll which is almost achieved by using just css. First of all, we need to hide the system’s ugly scroll (I am talking about Windows). To hide the scroll, we need to wrap the content container with another element. This wrapped element will have overflow: hidden and the content container element will have overflow: auto and some padding at right to hide the scroll. Now just we need to apply events like scroll, mouseup, mousedown and mousemove.

In the below example, I have used prototypejs to attach events. If you are new to prototype and you good with javascript then there is no need to worry. you can just refer the below prototypejs code which is easy to understand.

I have implemented only the scroll event using prototypejs. I hope you can implement the other events by referring the below code. Enjoy!!

HTML

<div class="content-wrapper">
    <div class="content-holder">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        <div class="scroll-bar"></div>
    </div>
</div>

CSS

.content-wrapper {
    width: 380px;
    overflow: hidden;
    display:inline-block;
    position:relative;
}
.content-holder {
    overflow: auto;
    padding-right:18px;
    line-height: 15px;
    padding-bottom: 2px;
    width: 100%;
    height: 90px;
}
.scroll-bar {
    background-color: #999999;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 5px;
    opacity: 0.5;
}

Javascript (prototypejs)

var SlimScroll = Class.create();
SlimScroll.prototype = {
    initialize: function () {
        this.scrollKit();
    },
    scrollKit: function () {
        var scrollElement = $$('.content-holder')[0];
        var height = scrollElement.offsetHeight;
        var scrollHeight = scrollElement.scrollHeight;
        var scrollPercentage = (height / scrollHeight);
        var scrollBarElement = $$('.scroll-bar')[0];
        if (scrollHeight > height + 5) {
            scrollBarElement.setStyle({
                height: (height * scrollPercentage) + "px"
            });
            Element.observe(scrollElement, 'scroll', this.scrollBar);
        } else {
            Element.hide(scrollBarElement);
        }
    },
    scrollBar: function (e) {
        var elem = e.currentTarget;
        var height = elem.offsetHeight;
        var scrollHeight = elem.scrollHeight;
        var scrollTop = elem.scrollTop;
        var percentage = (height / scrollHeight);
        var barPosition = scrollTop * percentage;
        var scrollBar = $$('.scroll-bar')[0];
        scrollBar.setStyle({
            top: barPosition + "px"
        });
    }
}

var slimScroll = new SlimScroll();

JSFIDDLE

About these ads

2 thoughts on “Implementing basic Slim scroll

  1. This scroller works only on mousewheel but when we click on that scroller and drag it with mouse, then it does not work. Is there any way to make it work on cursor drag??

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s