Question

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

PERFECT SCROLLBAR

我有红色的文档，我有点困惑。我已经下载了它的最新版本。该文件夹包含许多文件，我真的不知道如何处理它们。还有像＆＃34; min＆＃34;等文件夹。和＆＃34; src＆＃34;。那么有人可以告诉我如何使用这个插件吗？我应该在html中包含哪些文件以及我应该采取哪些其他设置来完成工作？我知道，我应该首先学习js和jquery，但如果有人能在这里有所帮助，我将不胜感激。谢谢

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

以下是我的主页的代码：

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

 </div>

 </body>
 </html>

这是CSS：

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

和JS（包含的scroll.js）：

 $(document).ready(function() {

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

 });

Answer 1

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>

Answer 2

你在官方报告中有一个例子：

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

您可以使用Perfect Scrollbar

初始化您的iframe内容

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

＆＃34;完美的滚动条＆＃34;在iframe上使用

2 个答案: