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.

DigTheDoug · Accepted Answer · 2013-01-30T20:59:53.130

6

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.

edited Jan 30 '13 at 20:59

answered Jan 20 '13 at 16:58

DigTheDoug

1,420
10
20

Unfortunately,this trick does not work.I had tried this trick earlier,but in vain The official author of the script has also confirmed,that it wont work http://manos.malihu.gr/jquery-custom-content-scroller/comment-page-9/#comment-16062 I tried another trick,which has this issue. http://stackoverflow.com/questions/14426548/how-to-change-default-scrollspeed-scrollamount-scrollinertia-of-a-webpage – Rahul Shah Jan 21 '13 at 16:57
Ok that's a shame. I wonder if if does not affect children elements. Did you try what the author mentions in that comment you posted? Does that work? – DigTheDoug Jan 21 '13 at 18:23
Ya,but if do that trick,i would be scrolling in the top 1st 800 pixels(approx) of the page only..i am creating a 5000 long pixels 1 page website having multiple background images. So if i try the trick the author mentions,i would be always stuck at the top of the page. – Rahul Shah Jan 22 '13 at 03:53
Not sure I understand what you mean. If you put everything you have inside the page inside a container div with `height: 100%`, why would it be restricted to 800px? So you would just create a new div called `scroll-container` right inside your `body` and put all the HTML that you have currently inside that then call your JS on `scroll-container` it should work, no? – DigTheDoug Jan 22 '13 at 16:15
Are you sure? Because the link you posted to the author's comment shows it working with percentages: http://manos.malihu.gr/tuts/custom-scrollbar-plugin/full_page_demo/ – DigTheDoug Jan 23 '13 at 15:34

score 1 · Answer 2 · answered Sep 19 '15 at 16:04

Maybe for someone it's still actual. So the solution is as follows.

$(function()
{
 var win = $(window);
 var isResizing = false;
 win.bind(
  'resize',
  function()
  {
   if (!isResizing) {
    isResizing = true;
    var container = $('#full-page-container');
    container.css(
     {
      'width': 1,
      'height': 1
     }
    );
    container.css(
     {
      'width': win.width(),
      'height': win.height()
     }
    );
    isResizing = false;    
   }
  }
 ).trigger('resize');

        $('body').css('overflow', 'hidden');

 // IE Tweak
 if ($('#full-page-container').width() != win.width()) {
  win.trigger('resize');
 }

        $('#full-page-container').mCustomScrollbar({
            theme: "dark",
            scrollbarPosition: "inside",
            scrollInertia: 300,
            snapAmount: 50,
            scrollButtons: { 
                enable: true
            },
            contentTouchScroll: true,
            scrollEasing:"easeOutCirc",              
            autoDraggerLength:true,               
            advanced:{  
                updateOnBrowserResize:true,   
                updateOnContentResize:true   
            }
        });
});

*{
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
  background-color: #f1f1f1;
}

#full-page-container
{
  overflow: hidden;
}

.container{
  width: 700px;
  height: 1200px;              
}

.main-content{              
  height: 1200px;              
}

.content{
  width: 250px;
  height: 200px;
  margin: 0 auto;                
  margin-bottom: 10px;
  background-color: #0066cc;
}

<!DOCTYPE html>
<html>
    <head>
        <title>mCustomScrollBar</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.0.9/jquery.mCustomScrollbar.min.css">
      </head>
  <body>
    <div id="full-page-container">
      <div class="container">            
        <div class="main-content">
            <div class="content">Content</div>
            <div class="content">Content</div>
            <div class="content">Content</div>
            <div class="content">Content</div>
            <div class="content">Content</div>
            <div class="content">Content</div>
            <div class="content">Content</div>
        </div>
      </div>
    </div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.0.9/jquery.mCustomScrollbar.concat.min.js"></script>

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

2 Answers2