Want to replace browser scroll bar with my own

I have one problem in my home page design. Problem is that I don't want a scroll bar which is provided by the browser. I have created my own scroll bar so please give me hint how can do this thing?

1. Can I use jQuery?
2. Can 开发者_运维知识库I do this through HTML?

Styling the scrollbar isn't part of any standard and it's implemented differently in different browsers. You'll therefore want to use some JavaScript code to ensure your styles are applied consistently across browsers. Check out jScrollPane, a jQuery plugin.

I got it

body {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}


html {
    overflow-y: auto;
    background-color: transparent;
}


::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}


::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    height: 30px;
    display: block;
    background-color: transparent;
}



::-webkit-scrollbar-track-piece {
    background-color: #3b3b3b;
    -webkit-border-radius: 6px;
}


::-webkit-scrollbar-thumb:vertical {
    height: 50px;
    background-color: #666;
    border: 1px solid #eee;
    -webkit-border-radius: 6px;
}

You can either change the color settings of the browser's scrollbar, or limit content to an element within your page and create a Javascript script (possibly with the use of jQuery) to navigate that element if its content overflows.

A Google search of the later contains many tutorials that should be able to help you.