H5P scrollTop doesn't account for site Top-nav

Morgan_HTW's picture

We are using various H5P content types in various moodle instances from 3.8 to 3.11, predominantly the 'interactive book' content type.

On most modern webdesigns (LMS or otherwise) it is common to have a fixed top-nav. Regardless of which browser or H5P plugin version we have tested (obviously those that are compatible with the above moodle versions) the scrollTop function fails to account for the top-nav offset, which means that every click on a page navigation results in losing the page navigation under the top-nav.

Here is a demo: https://codepen.io/unit60/pen/zYZEpGd

To my knowledge it is not possible to affect the embeded iframe with Javascript, which means we are stuck with this unfortunate UX issue, unless it is remidied at source.

Also, from a UX perspective, perhaps it would be nice to have the choice of perhaps not having a scrollTop, as this can be disorientating in terms of accessability.

On a further note, regarding UX, perhaps the content and window height could be checked, as; if the content of the iframe is less than the window browser height, the content jumps around causing further distress to the user.

Kind regards
morgan

Content types: