【问题标题】:Fixed Page Scrolling固定页面滚动
【发布时间】:2015-11-18 05:34:12
【问题描述】:

iOS 上,当您在 Google's I/O Event page 上滚动时,Safari 地址栏的高度不会降低。但是,如果您在任何其他网站上滚动,Safari 的地址栏就会缩小。

这是如何实现的?我一直在尝试查看他们的 CSS 代码。我认为他们在他们的网站上使用了 Polymer。

两个截图都滚动到页面底部,看Safari地址栏的高度差。

【问题讨论】:

  • 这种情况是否在 iOS 上发生?有没有其他方法可以复制?
  • 哦,好吧,我明白你的意思了。它也发生在 Android Firefox 上。它看起来不像在桌面浏览器上会发生的事情。
  • @iamnotmaynard Yes 似乎只能移动。让我添加屏幕截图。
  • 我进行了编辑,以便更容易比较图像。如果您认为这会使它不太清楚,请回滚。

标签: html css mobile polymer


【解决方案1】:

我手头没有 iphone 来测试它,但我认为这是因为他们有

<core-draw-panel>  set to overflow: hidden;

和子元素

<div main> set to overflow-y: scroll;

我认为这可以防止 url 栏隐藏在滚动条上。

【讨论】:

  • 嗯。我在想它会比这复杂得多,但这是有道理的。
  • @iamnotmaynard 嗯,一样。感谢您的回答。我会测试一下。 Lajon,你能解释一下为什么/如何工作吗?
  • 在 iOS 中最小化顶部和底部栏适用于原生滚动。如果您将其关闭并将滚动添加到页面上的任何其他元素,则 Safari 栏不会缩小。这里看起来有点棘手,因为我看不到溢出:隐藏;在 body 或 html 元素上,但看起来 core-draw-panel 负责在页面上滚动,这就是为什么溢出:隐藏;在此元素上指定。
  • 长话短说添加溢出:隐藏到正文,任何页面上的html元素并添加滚动到子元素和safari栏不会缩小。
  • @Lajon 感谢您的解释!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-07-18
  • 1970-01-01
  • 1970-01-01
  • 2012-10-19
相关资源
最近更新 更多