Custom Scrollbars in HTML5 Widget

While iPads and iPhones are incredibly intuitive, its user interface can at times lead to missed content within your publications.

With the HTML5 viewer, Zmags Publicator users have the option to embed external content within the pages of your publications by using the HTML5 IFrame Widget. This varies from videos to entire web pages. However, whenever including additional textual content to your pages, you will see that should the text exceed the area of the HTML5 iFrame Widget, a scrollbar will be added to the embedded page so that the additional content can be accessed.

With most devices, the scrollbar will be automatically displayed and the additional content is evident. However, with iOS devices the scrollbars are hidden so as to maintain a ‘sleeker’ look and the additional content is easy to miss and so we have put together an easy-to-use solution which allows you to customize the behavior of scrollbars across all devices.  

Please click here to view a live example of the code below.
Please click here to download the files for the solution.

How can I use this solution?
    1) Download the code above using the link above.
    2) Open the ‘index.html’ file using a text editor such as Notepad ++ or TextWrangler.
    3) Enter the desired theme (see below) or you may leave as is (‘dark’ is the default theme selected).
    4) Copy and paste text from source directly where ‘Input text below’ comment is shown.
    5) Save the file and upload the entire folder to your website. 

Scrollbar Themes
As this is a custom solution, you also have the option of choosing from several scrollbar themes. You can see all available options here and when you’ve selected your desired theme, it simply a matter of entering it’s name within the section highlighted below: