Search code examples
jquery-pluginselementscrollerslimscroll

How to Apply SlimScroll to Body Element?

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"

Solution

  • 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.