Menu
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.
933
Suppose we want to add a scroll bar option in HTML, use an “overflow” option and set it as auto-enabled for adding both horizontal and vertical scroll bars. If we want to add a vertical bar option in Html, add the line “overflow-y” in the files.
If you want to add a scrollbar to an element like a <div>, you'll have to use the CSS overflow property. Scrollbars can be vertical (Y-axis) or horizontal (X-axis). Implementing a custom scrollbar to elements is the same.
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
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.
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
