How to change default scrollbar of entire page and not merely within a div

Question

I am trying to change the default scrollbar of my webpage with the help of the following tutorial:
http://manos.malihu.gr/jquery-custom-content-scroller/

The issue is that the scrollbar changes for the content we put inside a particular div tag and not of the entire page. For example, in this demo the scrollbar has changed, but not of the enitire page. Can anyone please help me in changing the scrollbar of the entire page and not merely a particular block of content.

Answer 1

The styles you are using are being applied to the #content_1 div only (see the mCustomScrollbar class when you inspect the code?). Accoording to the Tutorial you posted:

After files inclusion, you call mCustomScrollbar function on the element you want to add custom scrollbars.

So instead of calling it on that div, you would need to call it on the body if you want it to apply to the whole page:

$("body").mCustomScrollbar();

Edit:
From the developer's page he comments that it won't work specifically on body but you can do the same thing with a container div instead of the body.