V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
weijar
V2EX  ›  CSS

用 position:sticky 做的 app bar 好象有点问题啊,翻页的时候会挡住一部分内容

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

    https://codepen.io/weijarz/pen/ExWXpxZ

    如上,一个红色 app bar,我需要永远出现在视口,数字串是内容。 问题来了,比如在第一页,最下面数字是 8,那我按 page down 翻页,下一页内容应该出现 9,问题是下一页的 9 会被红色 bar 挡住了!

    我记得以前看过不少文章是用 sticky 做工具栏的,有这种问题怎么做工具栏啊?还是说我用错了?

    4 条回复    2021-05-26 15:01:47 +08:00
    weijar
        1
    weijar   186 天前
    至于为什么不用 position:absolute, 那个没有 stikcy 完美啊,还要额外在内容上做个和 bar 一样高的 margin-top 。
    且如果焦点在工具栏上,比如那个按钮上,按 page down 是不会翻页的,而 sticky 的可以。
    autoxbc
        2
    autoxbc   186 天前
    大多数情况下,相对视口高度来说,bar 的高度很小,过度滚动现象几乎察觉不到,以及,用翻页键滚动的更少

    一定要的话,加上这两句可以实现需求
    .root {
    height:100vh;
    overflow-y:hidden;
    }
    .content {
    height:calc(100vh - 256px);
    overflow-y:auto;
    }
    weijar
        3
    weijar   186 天前
    @autoxbc 我的 bar80px,刚好漏一行字。。。
    你这个方法可行,但会象 position:absolute 一样,焦点不刚好定位在.content 上时键盘上下键和翻页会失效(比如焦点在那个按钮上时)
    autoxbc
        4
    autoxbc   186 天前
    @weijar #3 这个行为是合理的,前面 .bar 点击后还可以键盘翻页才比较反常

    可以尝试手动转移焦点
    window.onload = () => addEventListener('click', () => document.querySelector('.content').focus() );
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1193 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 23:48 · PVG 07:48 · LAX 15:48 · JFK 18:48
    ♥ Do have faith in what you're doing.