我无法让 mCustom jQuery 滚动条在 iframe 中工作。但我很灵活,如果有人知道任何其他对 iframe 可靠的滚动条插件,我会使用它(我已经尝试过所有流行的)。我只需要让默认滚动条看起来更现代。我发现了一些关于此的文章,其中包含各种“位”代码,但似乎没有任何效果。在我的小提琴http://jsfiddle.net/vz4k7zfy/请注意,我想要#TabularFrame 上的滚动条,即iframe 本身,而不是它的#InnerContainer。这是因为我需要 iframe 中的深色标题保持粘性。有趣的是,当我为 iframe 使用#InnerContainer 而不是#TabularFrame 时,我的“测试容器”在小提琴中的位置较低。非常感谢任何帮助。
$('#TabularFrame').mCustomScrollbar({
theme: "dark-3",
axis: "yx",
scrollInertia: 500,
autoDraggerLength: false,
});
#OuterContainer {
height: 220px;
width: 550px;
padding: 10px;
border: 1px solid red;
}
#InnerContainer {
height: 170px;
width: 520px;
border: 1px solid blue;
overflow-y: hidden;
overflow-x: hidden;
Padding: 30px 0px 0px 30px;
}
#TabularFrame {
height: 140px;
width: 460px;
overflow: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.1/jquery.mCustomScrollbar.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.1/jquery.mCustomScrollbar.concat.min.js"></script>
<div id="OuterContainer">
<div id="InnerContainer">
<iframe id="TabularFrame" scrolling="no" src="https://c2amf323.caspio.com/dp.asp?AppKey=3eb84000d74521dad93a427d8e36">
</iframe>
</div>
</div>