How to Apply SlimScroll to Body Element?

Question

So I've been trying to apply the plugin to the Body Element and for some reason it just doesn't work.. Things I've tried:

$(function() {
  $('body, html').slimScroll({
    size: '8px',
    width: '100%',
    height: '100%',
    color: '#ff4800',
    allowPageScroll: true,
    alwaysVisible: true
  });
});

$(function() {
  $('#body').slimScroll({
    size: '8px',
    width: '100%',
    height: '100%',
    color: '#ff4800',
    allowPageScroll: true,
    alwaysVisible: true
  });
});

Does anyone know what Im doing wrong ? Thanks in advance for answering

"What If I dont have control of the body tag ? and Im embed a template into a 3rd party site? so the body has no id tag it only has view-source:avatars.imvu.com/LadyKonstantine"

Mijoe · Accepted Answer · 2014-07-03T12:50:52.097

9

Since you need to apply slim scroll on body you have to use the body selector for jQuery. The code will be like this :

    <script type="text/javascript">
      $(function(){
        $("body").slimScroll({
          size: '8px', 
          width: '100%', 
          height: '100%', 
          color: '#ff4800', 
          allowPageScroll: true, 
          alwaysVisible: true     
        });
      });
    </script>

Remember these

Make sure you have installed both jQuery and slimScroll plugin.
Scroll will be visible if your body have height above 100%
If you would like to use $("#body") instead of $("body") don't forget to add
```
<body id="body">
```

More Details

Click here! to read more about slim scroll.

edited Jul 03 '14 at 12:50

answered Jul 03 '14 at 12:45

Mijoe

236
2
9

What If I dont have control of the body tag ? and Im embed a template into a 3rd party site? so the body has no id tag it only has view-source:http://avatars.imvu.com/LadyKonstantine – Chris Lad Jul 03 '14 at 13:34
1

You can simply use $("body") if you don't have any id or class. – Mijoe Jul 03 '14 at 14:39
1

Chris, please check this if you have any doubt http://jsfiddle.net/mijoemathew/59pmV/ and mark my answer useful :) – Mijoe Jul 03 '14 at 14:44
Thanks bro! this really helped me! :) – Raru Apr 05 '20 at 13:54

score 4 · Answer 2 · answered Nov 03 '16 at 04:10

Attaching slimScroll directly to Body tag is not a preffered solution in my view. Try it and you will find the slimScroll wraps your BODY tag inside it's own DIV tag; at least I found it that way when I attempted to attached slimScroll to the BODY element. As a result, you will find the HTML of your page is a complete mess. The sequence of tags will be HEAD - slimScrollDiv - BODY. Instead, I suggest to have a wrapper DIV inside BODY immediately after you open BODY tag and then attach slimScroll to this wrapper DIV.

score 2 · Answer 3 · answered Jul 28 '17 at 05:11

SlimScroll only works on div element. To achieve this, add a main wrapper just after the opening body tag. In this case I will call it:

In the HTML:

<div id="body"></div>

Then calculate the viewport height, not the HTML, document height. Once done, pass this value to the height of the slimscroll plugin. Example:

In the JS:

var viewportHeight= $(window).height();
$('#body').slimScroll({
    height: viewportHeight+'px',
    color: '#455A64',
    distance: '0',
    allowPageScroll: true, 
    alwaysVisible: true     
});

score 1 · Answer 4 · answered Jul 28 '17 at 05:16

1

You can also use the new CSS value of vh to compute the height of slimscroll. Example:

$('#body').slimScroll({
    height: '100vh',
    color: '#455A64',
    distance: '0',
    allowPageScroll: true, 
    alwaysVisible: true     
});

answered Jul 28 '17 at 05:16

Plasebo

338
3
4

How to Apply SlimScroll to Body Element?

4 Answers4