[前端问题]关于移动端 Chrome 地址栏上移

2019-04-04 11:19:27 +08:00
 rabbbit

大家都知道在移动端上划页面时,顶部的地址栏也会跟着上去.一般可以用如下样式固定地址栏:

html,body {
  height: 100%;
  overflow:hidden;
}

但是我发现在 chrome(android 73)下某些可滚动(overflow-y:scroll)的 fixed 元素依然可以触发地址栏上移.

.fixed-el {
  overflow-y: scroll;
  position: fixed;
}

更奇怪的是,如果给这个 fixed 加上 opactiy: 0.999, 则可以阻止地址栏的上移.
起初以为是因为 opactiy 生成了合成层,但是换成 translate3d 就没有效果.

.fixed-el {
  overflow-y: scroll;
  position: fixed;
  opactiy: 0.999;
}

问题:
1 为什么在外层(body,html)固定的情况下, 某些 fixed 元素(有样式 overflow-y: scroll)可以触发地址栏上移. 这是 feature 还是 bug?
2 如果是 feature 的话,为什么 opactiy 能阻止地址栏上移.

798 次点击
所在节点    问与答
0 条回复

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

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

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

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

© 2021 V2EX