我真的需要这方面的帮助。我想用“完美滚动条”替换 iframe 上的默认滚动条。 我已经下载了完美的滚动条。我还将所需的文件包含到我的 html 文档中。根据文档，我在 iframe 中设置了内容容器的样式。结果是，当我加载主页并将鼠标光标移动到 iframe 上时，会出现“完美滚动条”，但默认滚动条仍然存在。下一个问题是，新的滚动条根本不起作用。它从 iframe 内容的顶部开始，到 iframe 内容的底部结束，因此我无法滚动它。
我的 iframe 内容页面的 HTML:
<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(包括scroll.js)
$(document).ready(function() {
"use strict";
$('#amfCont').perfectScrollbar();
});
谁能指出我这里有什么问题吗？
最佳答案
尝试jQuery Scrollbar在你的 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>
在上面的示例中，我使用了 scrollbar-macosx 类，但您可以从预定义样式中选择任何样式，或者制作您自己的自定义滚动条 - 它是完全可自定义的 CSS。
关于javascript - 完美滚动条默认滚动条保留且 "perfect-scrollbar"不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22403144/