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?

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