javascript - TypeError: $(...).perfectScrollbar is not a function - Stack Overflow

admin管理员组

文章数量:1208155

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

Share Improve this question Follow edited Sep 10, 2023 at 18:12 Progman 19.5k77 gold badges5454 silver badges8080 bronze badges asked Dec 1, 2015 at 19:53 lisandromlisandrom 16122 gold badges22 silver badges99 bronze badges

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 8

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>

本文标签： javascriptTypeError ()perfectScrollbar is not a functionStack Overflow