Want to replace your browser scrollbar with my own

Question

I have one problem in the design of my homepage. The problem is that I don't want the scroll bar provided by the browser. I created my own scrollbar, so please let me know how to do this?

• Can i use jQuery?
• Can I do this via HTML?

Answer 1

Styling the scrollbar is not part of any standard, and it is implemented differently in different browsers. Therefore, you will want to use some JavaScript code to ensure that your styles are applied consistently in browsers. Check out the jScrollPane jQuery plugin.

Answer 2

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;
}

Answer 3

You can change the color settings in the browser scroll bar or restrict the content to an element on your page and create a Javascript script (possibly using jQuery) to navigate through this element if its content is full.

A Google search from a later version contains many guides that can help you.