"perfect scrollbar" use on iframe

Question

I was searching for a cross-browser solution of customizing a scrollbar of my iframe. I am not very advanced with javascript, so I was looking for a css solution. I found css solution for webkit browsers, but that worked only in opera, chrome, but not in IE. Now, I can see that I will not be able to avoid using js. I was searching for a good solution and this come to my hands

PERFECT SCROLLBAR

I have red the documentation, bu I am a little bit confused. I have downloaded the latest version of it. The folder is containing many files and I dont really know what to do with them. There are also folders like "min" and "src". So can anyone please tell me how to use this plugin? Which files should I include in my html and what other setting should I make to get things done? I know, that I should study js and jquery first, but I will be grateful if someone can be helpful here. Thank you

EDIT: OK I managed to get it work a little bit. I need to apply that scrollbar to a iframe. However, I have some difficulties. When I do it like you can see below, when I move mouse over my iframe, the scrollbar appears , but the default scrollbar also stays there and only the default one is functional.

Here is the code of my main page:

  <html>
     <head>

       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
       <title>TITLE</title>
       <link rel="stylesheet" type="text/css" media="all" href="css/main.css" />
       <link rel="stylesheet" type="text/css" media="all" href="css/menu.css" />
       <link rel="stylesheet" type="text/css" media="all" href="css/perfect-scrollbar-0.4.8.min.css" />

       <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
       <script type="text/javascript" src="js/menu.js"></script>
       <script type="text/javascript" src="js/contChange.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>

     </head>

     <body>

       <div id="div1" class="contentHolder" style="display:none">
         <iframe width="340" height="525" frameborder="0" src="content/page.html"></iframe>
       </div>

     </body>
   </html>

Here is CSS:

  .contentHolder {
    position:relative;
    overflow:hidden;
  }

and JS (the included scroll.js):


     $(document).ready(function() {

       $('#div1').perfectScrollbar();

     });

score 0 · Answer 1 · edited Jul 02 '20 at 09:10

0

Add these lines of code for your code:

<script src="perfect-scrollbar-0.4.8\src/jquery.mousewheel.js"></script>  
<script src="perfect-scrollbar-0.4.8\src/perfect-scrollbar.js"></script>
<link href="perfect-scrollbar-0.4.8\src/perfect-scrollbar.css"/>

For scrollbar write as they mentioned in the document:

<style>
#Demo { position: 'relative'; }
</style>
<script>
    $('#Demo').perfectScrollbar();
</script>
<div id='Demo'>
<div>
...
</div>
</div>

edited Jul 02 '20 at 09:10

anastaciu

23,467
7
28
53

answered Mar 14 '14 at 09:55

rk rk

314
1
8

Thank you. I have edited my question. I need to apply the perfect-scroll on my iframe. Would you be so kind and would you look on my code please? – user2886091 Mar 14 '14 at 10:06

score 0 · Answer 2 · answered Feb 17 '16 at 12:12

0

You have an example in the official repo:

https://github.com/noraesae/perfect-scrollbar/blob/master/examples/iframe.html

You can initialize your iframe content with Perfect Scrollbar

Ps.initialize(iframe.contentDocument.querySelector('#Default'));

answered Feb 17 '16 at 12:12

Xavier Boubert

139
1
7

"perfect scrollbar" use on iframe

2 Answers2