Scrolling with keyboard skips embedded content sections

Esri / storymap-journal

The Story Map Journal is ideal when you want to combine narrative text with maps and other embedded content.

Apache License 2.0

99 stars 79 forks source link

Scrolling with keyboard skips embedded content sections #66

Open martin-martin opened 8 years ago

martin-martin commented 8 years ago

While using the buttons on the page to scroll down the embedded StoryMaps load normally. However, when instead navigating with the up and down keys, it jumps across these sections right to the final section.

I'm not sure what causes this (there's some JS errors showing up in the DevTools, but I don't know whether they are related). Here's the practice map I was working on, so that you are able to recreate the issue: http://www.arcgis.com/apps/MapJournal/index.html?appid=84f2210e52374f3cbb52314b251d58f8

martin-martin commented 8 years ago

I tried around a bit more and found that it usually skips the second and third-to-last sections (no matter what's their content, it seems)

After clicking the third-to-last one directly, it continues only skipping the second-to-last when scrolling.

After reloading, both get skipped again.

(the storymap reflects the new insights)

Hope this is somewhat useful!

glazou commented 8 years ago

When using arrow up/down on Map Journal with the side panel layout, the application is scrolling up/down the panel 100px. That's mimicking what's happening when you use your mouse scrollwheel.

The issue here is that your content for each section is smaller than 100px so when using the arrow keys, it will skip some sections. The side panel layout is not a good fit for such small content but if you go in the settings and select the "Floating panel" layout that will behave as you expect.

martin-martin commented 8 years ago

Oh, alright. So this is not an error, but instead a decision for a certain px value per "scroll".

Thanks for explaining : )

Although I still don't quite understand why it ends up skipping only some sections but not others. They were all very short, because I was only playing with the functionalities. It didn't manage to see the pattern in when it would skip and when not. Do you mind giving me a tip about that?

glazou commented 8 years ago

You are welcome. Yes and in fact that 100px is not arbitrary, it's just browser default. The app is basically not doing anything and let the browser do have it's standard behavior. But in Floating panel we have changed browser default so you it changes sections properly.

So in side panel it's skipping some sections because the active section in Map Journal is the one that is above middle of the panel (except when you are on top or have reached bottom). As you have more than one section above middle of the panel, at your first scroll those would be skipped.