I can't get mCustom jQuery scrollbar to work inside an iframe. But I'm flexible and if anyone knows any other scrollbar plugin that's reliable for iframes, I'll use it (I've tried all the popular ones already). I just need to make the default scrollbar look more modern. I've found a few articles on this, with various 'bits' of code, but nothings seems to work. In my fiddle http://jsfiddle.net/vz4k7zfy/ note that I want the scrollbar on #TabularFrame ie the iframe itself, not on its #InnerContainer. This is because I need the dark header in the iframe to remain sticky. Interesting that my 'test container' positioned lower down in the fiddle works when I use #InnerContainer for the iframe, but not #TabularFrame. Any help very much appreciated.
$('#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>