How custom a scrollbar - Custom Scrollbar Malihu

I've followed the tuto' and try somes tips. I swim in the ground.

Sujet résolu

9 novembre 2017 à 18:08:45

Hello everybody

,

I try currently to custom my scrolbar with a jquery plugin. But I got some difficults, and I sollicit your kind help if possible.

I have tried severals tips, as custom ScrollBar of Malihu. I like this pluggin because I feel great with its simple presentation.

But it's does'nt work. My browser's scrolbar remain the same.

I have download niceScrollbar, jscrollPane. Nothing work .

I have tried to remove my <!Doctype> declaration, because I've tought maybe that was the inners rules of html wich caused the problem, but it is does'nt work.

So i will present to you my codes, and if you have any idea, I'm interested as you can assume !

To inform you : here the theme page of the website Malihu.

ok,

So my HTML firstly :

Code:

<html>


      <head>

     
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="jquery-ui.min.js" > </script>
      <link href='tathmini.css' rel='stylesheet' type='text/css'/>
      <script type="text/javascript" src="tathmini.js"></script>
   
            
      <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
      <script type="text/javascript" src="jquery.mCustomScrollbar.concat.min.js"></script>
      <link type="text/css" href="jquery.mCustomScrollbar.css" rel="stylesheet" media="all" />
  
      
   <title> Tuto Scrollbar </title>
   
      </head>

<body> 
 
      <p>
    Je suis un grand paragraphe dans un scroll personnalisé <br/>
    Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
            Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
            Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
          Je suis un grand paragraphe <br/>
         
 </p>
</body>

<footer>
   
   <div class="container">
      footer content 
   </div>
   
</footer>
</html>

Then, my JS :

Code:

/* Document ready start */
$(document).ready(function() {
/* Document ready start */

$("body").mCustomScrollbar("update");

$(function () {
 
  $("body").mCustomScrollbar({ // on choisit la div "intro"
    verticalScroll:true, // barre verticale
    theme:"rounded-dark", // thème pour la barre, personnalisable
    set_height:"500px", // on fixe la hauteur à 500 pixels
    set_width:"400px", // et la largeur à 400 pixels
    scrollButtons:{
      enable: true // on choisit d'afficher les flèches haut et bas
    }
  });
 
});



/* Document ready end  */ 
    });
/* Document ready  end */

and my CSS :

Code:

html, body {
    margin : 0 ;
    display : table;
    height : 100% ;
    width : 100% ;
}

.container {
    height : auto ;
}

footer {
    display : table-row ;
    height : 1px;
    background-color : #aaa ; 
}

Thank you for your reading,

See you soon ^^',
Laurent

-
Edité par Laurent_dchtl 9 novembre 2017 à 18:10:29

Anonyme

9 novembre 2017 à 18:31:34

I think it's always better to provide more informations about errors appearing in your console when asking such questions.

Are you sure the js and the css files you are calling are really loading?

Are they the good ones?

-
Edité par Anonyme 9 novembre 2017 à 18:32:53

Laurent_dchtl

9 novembre 2017 à 19:27:52

thank you stfsngue for your answer.

In fact my console don't display any error ..!

However, I got some pictures of my elemetsStyle and Event, maybe it will help...

Thank you again,

Laurent.

-
Edité par Laurent_dchtl 9 novembre 2017 à 19:29:19

Anonyme

9 novembre 2017 à 21:55:41

I tried something with your code with some changes:

1. I group all the body code into a div with a class "content" (fix the width/width of the body is not a good idea)

2. I set the height in the css style and not in the malihu plugin

3. I remove the width setting from the plugin ( but it is optional, you can leave it if you want)

And it is working as expected.

<!DOCTYPE html>

<html>

  <head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.js"></script>

    <style type="text/css">
      .content{
        height: 500px;
      }
    </style>

    <script>
        (function($){
            $(window).on("load",function(){
                $(".content").mCustomScrollbar({ // on choisit la div "intro"
                  verticalScroll:true, // barre verticale
                  theme:"rounded-dark", // thème pour la barre, personnalisable
                  //set_height:"500px", // on fixe la hauteur à 500 pixels
                  //set_width:"400px", // et la largeur à 400 pixels
                  scrollButtons:{
                    enable: true // on choisit d'afficher les flèches haut et bas
                  }
                });
            });
        })(jQuery);
    </script>

    <title>Page Title</title>

  </head>

  <body>

    <div class="content">

      <p>
          Je suis un grand paragraphe dans un scroll personnalisé <br/>
          Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                  Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                  Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
                Je suis un grand paragraphe <br/>
               
       </p>
      
    </div>

  </body>

</html>

-
Edité par Anonyme 9 novembre 2017 à 22:00:48

Laurent_dchtl

10 novembre 2017 à 0:21:30

Oh yes it works ! very thank you,

and... I wonder why it does'nt worked when the code was separated ?

I like to refined my code so, I wonder if it possible do to the custom in a separated way ?

Very interesting problem ! I learn,

Kind regard,

Anonyme

10 novembre 2017 à 9:36:16

Happy to know you solved your problem. You should mark the question as resolved.