Change scroll bar with perfect scroll

Question

I am trying to find a way to change the scroll bar to a perfect scrollbar for the entire page

http://noraesae.github.io/perfect-scrollbar/

Any way to do so?

Answer 1

Make a div under the body that holds all the page's code. Give this CSS to the div:

position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;
overflow: scroll;

Then just apply the perfect-scrollbar on the div.

---

A little explanation:

// Set the div's position
position:absolute; // Set the div display to be relative to the document

// Make the div cover the full page
// by setting all directions px to 0
top:0px;           // Set the div start from top
bottom:0px;        // Set the div start from bottom
right:0px;         // Set the div start from right
left:0px;          // Set the div start from left

// Set the div to show a scrollbar on overflow
overflow: scroll;