0

我正在寻找自定义 iframe 滚动条的跨浏览器解决方案。我对javascript不是很先进，所以我一直在寻找一个css解决方案。我找到了适用于 webkit 浏览器的 css 解决方案，但它只适用于 opera、chrome，但不适用于 IE。现在，我可以看到我将无法避免使用 js。我正在寻找一个好的解决方案，而这已经到了我的手中

完美的滚动条

我有红色的文档，但我有点困惑。我已经下载了它的最新版本。该文件夹包含许多文件，我真的不知道如何处理它们。还有像“min”和“src”这样的文件夹。那么谁能告诉我如何使用这个插件？我应该在我的 html 中包含哪些文件以及我应该进行哪些其他设置来完成任务？我知道，我应该先学习 js 和 jquery，但如果有人能在这里提供帮助，我将不胜感激。谢谢

编辑：好的，我设法让它工作了一点。我需要将该滚动条应用于 iframe。但是，我有一些困难。当我像您在下面看到的那样执行此操作时，当我将鼠标移到 iframe 上时，会出现滚动条，但默认滚动条也保留在那里，只有默认滚动条是可用的。

这是我的主页的代码：

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

这是CSS：

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

和 JS（包含的 scroll.js）：


     $(document).ready(function() {

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

     });
4

2 回答 2

0

为您的代码添加这些代码行：

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

对于他们在文档中提到的滚动条写：

<style>
#Demo { position: 'relative'; }
</style>
<script>
    $('#Demo').perfectScrollbar();
</script>
<div id='Demo'>
<div>
...
</div>
</div>
于 2014-03-14T09:55:34.083 回答
0

您在官方仓库中有一个示例：

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

您可以使用 Perfect Scrollbar 初始化 iframe 内容

Ps.initialize(iframe.contentDocument.querySelector('#Default'));
于 2016-02-17T12:12:03.097 回答