Miniscroll is a little library for touch and desktop scrollbar application.

how to use:

include miniscroll.js into your page: <script src="miniscroll.js"></script>
include the html tag and add id or class: <div class="scroller">
// text here
</div>
css of the div ".scroller": .scroller {
    width: 400px;
    height: 300px;
    overflow: hidden;
}
initialize the miniscroll: new Miniscroll(".scroller", {
    axis: "y",
    size: 10,
    sizethumb: "auto",
    thumbColor: "#0e5066",
    trackerColor: "#1a8bb2"
});

use css:

change the color and appearence for all miniscroll class: .miniscroll-thumb {
    background-color: #0e5066 !important;
}

.miniscroll-tracker {
    background-color: #1a8bb2 !important;
}
change the color and appearence for a unique miniscroll id: #miniscroll-target .miniscroll-thumb {
    background-color: #0e5066 !important;
}

#miniscroll-target .miniscroll-tracker {
    background-color: #1a8bb2 !important;
}

example:

Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.

Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.

Ao contrário do que se acredita, Lorem Ipsum não é simplesmente um texto randômico. Com mais de 2000 anos, suas raízes podem ser encontradas em uma obra de literatura latina clássica datada de 45 AC. Richard McClintock, um professor de latim do Hampden-Sydney College na Virginia, pesquisou uma das mais obscuras palavras em latim, consectetur, oriunda de uma passagem de Lorem Ipsum, e, procurando por entre citações da palavra na literatura clássica, descobriu a sua indubitável origem.

Lorem Ipsum vem das seções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" (Os Extremos do Bem e do Mal), de Cícero, escrito em 45 AC. Este livro é um tratado de teoria da ética muito popular na época da Renascença. A primeira linha de Lorem Ipsum, "Lorem Ipsum dolor sit amet..." vem de uma linha na seção 1.10.32.

Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.

Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.

Ao contrário do que se acredita, Lorem Ipsum não é simplesmente um texto randômico. Com mais de 2000 anos, suas raízes podem ser encontradas em uma obra de literatura latina clássica datada de 45 AC. Richard McClintock, um professor de latim do Hampden-Sydney College na Virginia, pesquisou uma das mais obscuras palavras em latim, consectetur, oriunda de uma passagem de Lorem Ipsum, e, procurando por entre citações da palavra na literatura clássica, descobriu a sua indubitável origem.

Lorem Ipsum vem das seções 1.10.32 e 1.10.33 do "de Finibus Bonorum et Malorum" (Os Extremos do Bem e do Mal), de Cícero, escrito em 45 AC. Este livro é um tratado de teoria da ética muito popular na época da Renascença. A primeira linha de Lorem Ipsum, "Lorem Ipsum dolor sit amet..." vem de uma linha na seção 1.10.32.

Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.

parameters:

list of parameters: axis:
axle of the scrollbar ex: "y" or "x"

size:
the width of the scrollbar ex: 10

sizethumb:
the width or height of the thumb ex: 100 or "auto"

thumbColor:
background color of the thumb ex: "#0e5066"

trackerColor:
background color of the tracker ex: "#1a8bb2"

scrollbarSize:
size of scrollbar, you can set a size fix to scrollbar it ex: 300 this had left scrollbar with the height of 300px

isKeyEvent:
Add arrow key event, by default is true

turnOffWheel:
toggle on or off a mousewheel event, by default turnOffWheel is true

last updates:

version 1.2.9 update 1.2.9 10/09/2013 fix multidimensional scrollwheel
update 1.2.9 10/09/2013 fix error in the scroll when the position is relative or absolute
update 1.2.9 10/09/2013 fix updating on the x axis
update 1.2.8 03/09/2013 add turn off mousewheel, ex: { mousewheel: true }
update 1.2.7 03/09/2013 add scrollTo, now its posible scroll to a custom position
update 1.2.6 21/06/2013 fix bug the whole scrollbar (not just the handler part) moves down when I drag it.
update 1.2.5 18/05/2013 fix the position the thumb when key press down and up
update 1.2.4 18/05/2013 fixbug error it's time to catching the width and height
update 1.2.3 18/05/2013 fix scrollbar position "x"
update 1.2.2 17/05/2013 Key event added, now you can press the key down and key up for scrolling
update 1.2.1 15/05/2013 Touch event added, now works for ipad, iphone and android