perfect-scrollbar默认的scrollbar保持不变，而"perfect-scrollbar“不起作用
perfect-scrollbar默认的scrollbar保持不变，而"perfect-scrollbar“不起作用
提问于 2014-03-14 18:59:38
在这件事上我真的需要帮助。我想用"perfect scrollbar“替换iframe上的默认滚动条。我已经下载了完美的滚动条。我还将所需的文件包含到我的html文档中。根据文档，我在iframe中设置了内容容器的样式。结果是，当我加载主页并在iframe上移动鼠标光标时，会出现"perfect- scrollbar“，但默认的滚动条保持不变。下一个问题是，新的滚动条根本不起作用。它从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();
});有谁能指出我哪里错了吗？
回答 2
Stack Overflow用户
发布于 2014-03-14 22:21:06
尝试在您的iframe中使用jQuery Scrollbar。
<!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类，但你可以从预定义的样式中选择任何样式，或者制作自己的自定义滚动条-它是完全可自定义的。
Stack Overflow用户
发布于 2015-09-22 09:03:55
#amfCont需要一个height属性才能使此插件工作。下面是文档中的示例。
#container {
position: relative;
height: 100%; /* Or whatever you want (eg. 400px) */
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22403144
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号