Scrolling / Portrait Style course

Jan 11, 2018

Hi all

I want to create a course which has more of a portrait style view and it should scroll. I know that it is possible to make it work but I somehow can't achieve it. In following articulate demo you can see it work:

The course plays and if there's an overflow due to browser size you can scroll.

Can anyone please help me ? Is there any setting in the storyline - player which I've missed? Or does it need JavaScript or is it necessery to tweak the html /  CSS - file? If yes, how? ;-)


Thanks so much in advance.

Best regards



10 Replies
Michael Kauzlarich

Hello Stefan,

Maybe our computers are different but when I play that course and shrink the browser size it is just the browser's scroll bar which would work on any course when the browser is a smaller size than the course.

If you ever need a scroll bar in the slide itself you can use the "Scrolling Panel" option under the INSERT tab in Storyline. You insert that first and then you can put in shapes, text, etc. into the scrolling panel.

Stefan Tobler

Hi Michael

Yes - that's the way that module works - and I want mine to work the same - but I cannot achieve it. With the standard player you have some options to play around with Browser Size and Player Size. I've tried all combinations. Either it resizes your course to fit the browser so it would kind of shrink it to fit if its oversized - but then you cannot zoom in or out. Or it leaves the content at it's original size and you can zoom in or out but you cannot scroll - so I don't have an option that does the job - am I doing something wrong?

So what I want is actually a display size of 100% and if there is overflow in length it shouldnt resize but make the browser scroll bar appear (not the storyline scrollbar).

Any Ideas?

Thanks - Stefan

Michael Kauzlarich

Well, I'm not 100% sure on a solution but I'll just point out all the things that I think could affect this. On the DESIGN tab in Storyline there is the "Story Size" option so this is what the slide size will be displayed as in pixels in addition to the built in player size.

In the player properties (in the HOME tab), click "Other" in the custom ribbon and that will give you the option to:

  • Display at user's current browser size.
  • Resize browser to optimal size.
  • Resize browser to fill screen.
  • Additionally there is the Player Size option that let's you "Lock player at optimal size".

Other than that, I'm not sure. I publish to my LMS, Moodle, and there are settings there that let me adjust the browser size and other options.

Hopefully that helps or someone else can give you a more specific answer.


Stefan Tobler

Hi Maneli and Leslie

The trick is to enter following piece of Javascript into a trigger. But not to a trigger on the slide but in the player. It's a bit hidden and you'll probably not find it right away. Therefore see attached file.


// Cover Page - Scroll to Top
$.scrollTo( {top:'0px', left:'0px'},300 );


Thanks to Ariel Flesler for the jQuery.scrollTo and to Ryan Martin for sharing it. However Ryan Martin mentionned some difficuleties in MS IE in this post. What I've seen is that it does work with IE however you'd have to allow the "blocked content". Maybe there's also a solution for that.


Hope that helps.

Best regards



This discussion is closed. You can start a new discussion or contact Articulate Support.