Replace iframe scroll bars with nanoScroller bars about nanoscrollerjs

[jamesflorentino]

hi @mgartner you can only apply the scroll bar on a DOM element (e.g. a div layer) with a .nano class in it. If you want your iframe to have it, you'll have to do a couple of hacks.

Step 1. Set the iframe's overflow to hidden.

iframe{
  border: 0;
}

Step 2. Make a root container in the iframe's html content to wrap all your elements there.

<!-- iframe-content.html -->
<div id="root-container" class="nano">
  <!-- your html content here -->
</div>
<script>$('.nano').nanoScroller();</script>

Step 3. Set the CSS of that root container to width:100%; height:100%; margin:0; padding:0;

#root-container.nano {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
}

To note: NanoScroller doesn't replace the native gadget UI. It merely hides it from the viewport and then adds a custom scrollbar gadget.

Hope this solves your problem.

Cheers
James