Replace Browser Scrollbar with Custom Content Scroller

Question

I'm using the jQuery custom content scroller on my site and have all the files installed correctly. However, I would like this plugin to replace my default browser scrollbar and I'm having a difficult time making that happen. Obviously, I would need to apply it to the overall HTML markup.

To add this plugin to content the developer suggests the following:

<script>
    (function($){
        $(window).load(function(){
            $(".your-div-class-here").mCustomScrollbar();
        });
    })(jQuery);
</script>

So far, to apply it to the browser scrollbar, I've tried the code below and it hasn't worked:

<script>
    $(document).ready(
        function() {
            $("html").mCustomScrollbar();
        }
    );
</script>

Does anybody know what I'm doing incorrectly, or how I can make this code work on the browser?

Arundell

You can't replace the browser scrollbar with Javascript because this is part of the browser not the page; you can maybe try to wrap your whole site content in a div and apply the scroll on that element – Heffner

I'm assuming I'm nowhere as near fluent in jQuery as many of the users on this website. Is that what they're doing with this script: areaaperta.com/nicescroll ? – Arundell

Answer 1

You need to apply it to the body (not html) tag:

$("body").mCustomScrollbar();

See this demo from plugin homepage: http://manos.malihu.gr/tuts/custom-scrollbar-plugin/full_page_demo.html

Maes

WOW!! first time i see a scroll applied to BODY that works!! n.n – Aye