perfect-scrollbar default scrollbar remains and th

2019-02-26 06:45发布

站内问答 / JavaScript
656 2 5

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?

2条回答
▲ chillily
2楼-- · 2019-02-26 07:39

#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) */
}
查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
3楼-- · 2019-02-26 07:42

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)