perfect-scrollbar default scrollbar remains and the “perfect-scrollbar” not functional

I really need help with this one. I would like to replace the default scrollbar on my iframe with the "perfect scrollbar". I have downloaded the perfect scrollbar. I also have included the needed files into my html document. According to the documentation, I set up the style of content container inside my iframe. The result is, that when I load my main page and move the mouse cursor on iframe, the "perfect-scrollbar" appears, but the default scrollbar remains. Next issue is, that the new scrollbar is not functional at all. It starts on the top of the iframe content and it ends at the bottom of the iframe content so I can not scroll with it.

HTML of my iframe content page:

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <link rel="stylesheet" type="text/css" media="all" href="../css/iframestyle.css" />

    <link rel="stylesheet" type="text/css" media="all" href="../css/perfect-scrollbar-0.4.8.min.css" />

<!-- latest jQuery direct from google's CDN -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript" src="../js/perfect-scrollbar-0.4.8.min.js"></script>
<script type="text/javascript" src="../js/perfect-scrollbar-0.4.8.with-mousewheel.min.js"></script>
<script type="text/javascript" src="../js/scroll.js"></script>

<title>TITLE</title>

 </head>

 <body>

 <div id="amfCont">
 ..... // content to be scrolled
 </div>
</body>
</html>

CSS:

#amfCont {
font-family:"Verdana";
text-align:justify;
position:relative;
overflow:hidden;
}

JS (included scroll.js)

$(document).ready(function() {
"use strict";
$('#amfCont').perfectScrollbar();
});

Can anyone point out what do I have wrong here?

Try jQuery Scrollbar in your iframe.

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Scrollbar Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css">

        <script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
        <script src="http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script>

        <script>
            jQuery(function($){
                $('.page-wrapper').scrollbar();
            });
        </script>

        <style type="text/css">
            html, body, .page-wrapper {
                border: none;
                height: 100%;
                margin: 0;
                padding: 0;
                width: 100%;
            }

            .page-content {
                padding: 10px 20px;
            }
        </style>
    </head>
    <body>
        <div class="page-wrapper scrollbar-macosx">
            <div class="page-content">
                [CONTENT HERE]
            </div>
        </div>
    </body>
</html>

In example above I've used scrollbar-macosx class, but you can choose any from predefined styles or make your own custom scrollbar - it's fully CSS customizable.

#amfCont needs a height property for this plugin to work. Here's the example from the docs.

#container {
    position: relative;
    height: 100%; /* Or whatever you want (eg. 400px) */
}

来源：https://stackoverflow.com/questions/22403144/perfect-scrollbar-default-scrollbar-remains-and-the-perfect-scrollbar-not-func

标签

javascript

jquery

css

iframe

perfect-scrollbar