perfect-scrollbar - TypeError : $(. ..).perfectScrollbar 不是函数

Question

我正在尝试使用以下方法创建“完美滚动条”:

https://noraesae.github.io/perfect-scrollbar/

使用最简单的代码:

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

我有以下错误:

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

当然，每个 js/css 都指向正确的方向，如果需要，您可以在这里看到它:

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

看起来 jQuery 无法识别库，

有任何想法吗？

提前致谢。

Answer 1

您可能没有启用 jQuery 的版本。这段代码对我有用:

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