How is the page height adaptive?

Scenes
1

1.png1622×1230 320 KB

Please check my project, I want the content, that is automatically scaled, but the browser how to let the full content of its full show?

check this.hype.zip (842.2 KB)

2

Outer Hype content won’t change height based on inner content sizes. However, these steps might work for you:

  1. Put all the items in a group
  2. Set that group bounds to be the same as the scene
  3. Have the group have all flexible layout pins position/sizing set to on
  4. For the content overflow of the group, use “Scrollbars” or “Auto Scrollbars”
  5. Turn on the height 100% scale setting for the Scene

Please see the attached document with this change:

新官网手机版-fixed.hype.zip (848.7 KB)

1 Like
3

Thank you very much, I use your method to complete a few pages, but I have found that when sliding on the iphone, the damping is so big that the finger leaves the screen and the page scrolling stops immediately. Andorid work fine.

Demo：https://xiaofutech.com/m/

4

The URL doesn’t seem to work, however I can reproduce the issue with the older document. This can be solved by adding the -webkit-overflow-scrolling: touch; CSS property. You can do it via:

  1. Select the top-level group and add a Unique Element ID in the Identity Inspector in Hype. I called mine “scrollarea”
  2. Edit the Head HTML and add this within a <style> tag:
#scrollarea {
	-webkit-overflow-scrolling: touch;
}

新官网手机版-fixed-2.hype.zip (848.9 KB)

2 Likes
5

Cooool~

1 Like