一个局部滚动的 h5 现在应该怎么写?

2019-11-23 19:15:44 +08:00
 wukongkong

最近写一个典型的 h5,基本页面是,上面是聊天内容,下面是输入框。 发现几个点,挺麻烦的,想完美,还是有点困难。

我的基本思路是页面分成上下两部分,不使用 fixed,使用绝对定位去实现。

  1. 100vh 并不一定是稳定高度,在 safari 里面 100vh 会把底部地址栏和底部操作栏,算上。在页面滚动时候,这两部分会隐藏,这时候 100vh 才是对的。
  2. 在绝对定位的情况下,如果页面有跳转,底部会有微信的前进后退栏,有时候会挡住下面的输入框。如果还适配了 iPhoeX 系列,那么有时候底部的留白空间也不会消失。

这两个问题在页面可以全局滚动时候都还好,但是页面不能滚动的情况下,就比较麻烦了,最后和产品商量忽略了...

这种问题,你们是怎么处理的呢。

1702 次点击
所在节点    问与答
4 条回复
IsaacYoung
2019-11-23 19:45:29 +08:00
#header #body #footer

#body flex: 1
.container position absolute top left right bottom 都是 0
TMaize
2019-11-23 19:49:07 +08:00
html,body,.container 高度 100%,上 flex-growth:1 高度 0 滚动 auto,下 flex-sharlink:0
TMaize
2019-11-23 19:51:29 +08:00
如果微信的前进后退栏隐藏显示触发 onresize 事件,可以用 js 算高度
wukongkong
2019-11-23 20:36:22 +08:00
@TMaize 感谢~当时需要用 betterscroll 所以用了 calc 计算的高度。flex 自适应高度,不确定行不行=-=。
resize 事件学到了,确实应该可以监听到。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/622465

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX