0

After battling for hours and searching the depths of the web I still can't get my iframe to work with mCustom jQuery scrollbars. No scrollbars appear in the iframe. Note that my fiddle has a separate container lower down, simply to prove to you experts that the custom scrollbars do work in this fiddle - but only for an ordinary container of course. Fiddle http://jsfiddle.net/57ujsv0a/

Any help much appreciated.

https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.1/jquery.mCustomScrollbar.concat.min.js
https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.1/jquery.mCustomScrollbar.min.css


<div id="OuterContainer">
<div id="InnerContainer">

<iframe id="TabularFrame" scrolling="no" src="https://c2amf323.caspio.com/dp.asp?AppKey=3eb84000d74521dad93a427d8e36">
</iframe>

</div>
</div>





$('#InnerContainer').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;  
}
Silverburch
  • 457
  • 2
  • 12
  • 28
  • I strongly suspect this being an 'events not occurring as you assume' problem. What I mean is that maybe the #InnerContainer element is not present in the DOM when your code executes. You would need to have a document.ready() style event on the iframe content to know for sure that it is present. A quick test would be to wire up a button click on the outer html to apply the mCustomScrollbar() to the innerContainer. Then load the page, count to 10 and click the button and see if it 'works'. If so then you need to track the onLoad of the iframe before applying mCustomScrollbar() to its elements. – Vanquished Wombat Jun 17 '17 at 17:44
  • Much appreciate your suggestion. I'll try that and see how I get on. By the way, I'd ideally like to apply the scrollbars to the TabularFrame rather than the Inner Container (because I need the table header row in the iframe to stick), but I've been playing around with this code so much that I mistakenly left the script looking as if I want the scrollbars on the InnerContainer. – Silverburch Jun 17 '17 at 17:53
  • No, unfortunately activating the jQuery well after the DOM has executed still doesn't result in scrollbars. Do you happen to know if there are any other scrollbar plugins that work with iframes? My research suggests that most don't. – Silverburch Jun 17 '17 at 18:45

0 Answers0