I am trying to createa "Perfect Scrollbar" using this:

With the most simple possible code:

<script src=".11.3/jquery.min.js"></script>

<link rel="stylesheet" href="/css/perfect-scrollbar.css" />
<script src="/js/perfect-scrollbar.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#msgid").html("This is Hello World by JQuery.");
    $('#msgid').perfectScrollbar();
});
</script>

<div id="msgid"></div>

And I have the followin error:

TypeError: $(...).perfectScrollbar is not a function

Of course every js/css is pointing to the right direction, if needed you can see it live here:

.html

Looks like jQuery is not recognizing the library,

Any ideas?

Thanks in advance.

I am trying to createa "Perfect Scrollbar" using this:

https://github.com/noraesae/perfect-scrollbar-bower

With the most simple possible code:

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

<link rel="stylesheet" href="/css/perfect-scrollbar.css" />
<script src="/js/perfect-scrollbar.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#msgid").html("This is Hello World by JQuery.");
    $('#msgid').perfectScrollbar();
});
</script>

<div id="msgid"></div>

And I have the followin error:

TypeError: $(...).perfectScrollbar is not a function

Of course every js/css is pointing to the right direction, if needed you can see it live here:

http://florida.red111.net/a.html

Looks like jQuery is not recognizing the library,

Any ideas?

Thanks in advance.

• javascript
• perfect-scrollbar

5 Answers 5

You might not have the jQuery enabled version. This code worked for me:

<title>Test</title>
<!-- META -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- SCRIPTS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.7/js/min/perfect-scrollbar.jquery.min.js"></script>
<script type="text/javascript">

    $(document).on('ready', function() {

        console.log('HELLO!');

        $('.id-parent').perfectScrollbar();

    });

</script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/0.6.7/css/perfect-scrollbar.min.css" />
<style type="text/css">

    .id-parent {
        position: relative;
        overflow: auto;
        height: 200px;
    }

    .id-child {
        height: 1000px;
    }

</style>

</head>

<div class="id-parent">
    <div class="id-child">
        <h1>Content goes here</h1></div>
</div>

I was also having the same issue. I was calling the perfectScrollbar function before it's declaration. Changing the order worked for me.

I had the same issue. I was using perfect-scrollbar.jquery.js with jQuery 1.6.1. After updating jQuery to 2.1.4, the error disappeared and everything worked as expected!

Try updating jQuery, it solved the problem in my case.

Just update your perfect scrollbar on 0.5.2 version. It's work for me.

Recently stumbled upon similar issue. But in my case, the required JavaScript & CSS files were wrongly imported resulting in TypeError

<link rel="stylesheet" href="/css/perfect-scrollbar.css"/>
<script src="/js/perfect-scrollbar.js"></script>