首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
wukongkong
V2EX  ›  问与答

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

  •  
  •   wukongkong · 65 天前 · 531 次点击
    这是一个创建于 65 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    4 回复  |  直到 2019-11-23 20:36:22 +08:00
    IsaacYoung
        1
    IsaacYoung   65 天前 via iPhone
    #header #body #footer

    #body flex: 1
    .container position absolute top left right bottom 都是 0
    TMaize
        2
    TMaize   65 天前 via Android
    html,body,.container 高度 100%,上 flex-growth:1 高度 0 滚动 auto,下 flex-sharlink:0
    TMaize
        3
    TMaize   65 天前 via Android   ♥ 1
    如果微信的前进后退栏隐藏显示触发 onresize 事件,可以用 js 算高度
    wukongkong
        4
    wukongkong   65 天前
    @TMaize 感谢~当时需要用 betterscroll 所以用了 calc 计算的高度。flex 自适应高度,不确定行不行=-=。
    resize 事件学到了,确实应该可以监听到。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1433 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 25ms · UTC 01:05 · PVG 09:05 · LAX 17:05 · JFK 20:05
    ♥ Do have faith in what you're doing.