Scroll part of page

1

Hi!
I have done some projects in hype but here I am stuck.
I wonder if it is possible to make part of the page scrollable.
This will be used on a touch screen.
It should look like this:


Thanks!

2

You could put the image elements inside a group and set the groups overflow to scrollable in the element inspector. Make sure the bottom of the group is above the images that should scroll.

You can also do the above with a group but use css to limit which direction of scroll is allowed.

Give the group a class name and use the css like this.

<style>
.imageGroup {
  overflow-y: scroll!important;
}
</style>
1 Like
3

Thanks! I will try this.

4

I am not succeeding, maybe because i have the standard version of the program?
touch_1.zip (2.2 MB)
Is there any other way?

5

It has nothing to do with you version of Hype!.

The image group is given a class name of imageGroup
And it's overflow set to hidden. Which means hide and do not scroll to show any part of its children that overflow outside of it.

But we want Y axis scroll. (up/down)
In the head we place the css to control scroll. - Y i, to override the hidden on the Y axis.

We do not want X axis scroll. (left/right)

Because we have already hidden the overflow , we do not need to do anything else for the X axis.

	<style>
.imageGroup {
  overflow-y: scroll!important;

 }
 
</style>

Other things to consider.

If you have elements on top of you scroll group then they and not the scroll group will receive the pointer events gesture to scroll.
In this example I simply place your scroll group above everything else and shaped it to only overlay the image area below, as I assumed you would want interaction with the arrows on the panels on the side.

You can if need be limit pointer events on elements using the ignore all pointer events found in the Action inspector for the elements.

touch_1_mhv1.hype.zip (2.3 MB)

2 Likes
6

Now I understand. Thanks for the help!

1 Like