Scrollable Frame solution for EPUB Fixed Layout

Hi,

I have found a solution (or, rather a hack) which allows us to create scrolling frames for EPUB Fixed Layouts.

You can find the exported EPUB, as well as my InDesign file on my Dropbox: EPUB scroll.

This solution has some weak points and has only been tested in iBooks on an iPad with iOS 8, but here's how it works:

1. Create two text frames (one as big as your text requires, and one which will be the container [tip: make the container a bit wider than the text frame])
2. Cut the big text frame, select the smaller container frame, and Edit->Paste into
3. Right click on the container, select Object Export Options, choose EPUB and HTML and enter "subchapter" as epub:type:
4. Open a text editor and create a new CSS file. For CSS code, see below
5. Export as Fixed layout EPUB. In the export dialog box, select the CSS tab and add the previously created CSS file
6. Done!

CSS code:

div[*|type = "subchapter"] {
position: relative;
}

div[*|type = "subchapter"] > div {
overflow: auto;
}

As you see, steps 1 and 2 are essentialy the same as for creating a scrollable frame folio overlay.

It’s not perfect, and this solution is just a proof-of-concept, but it should get you going.

An obvious problem is that we use basic HTML scrollbar, which is not being displayed in e-book readers such as iBooks on the iPad. Hence, the user has now idea how long the scrollable content stretches. This could probably be solved with a more complex, JS-based solution.

Also, the gradient feather at the bottom (which is intended to create a "fade-out effect) seems not to export well. This one should be easy to solve, placing another rectangle with a gradient in it. But I’m not sure if transparency exports well, and haven’t tested it.

Feel free to use, and improve, this hack!

Thanks,

/Jacob