Question

我在Mobile Safari中使用固定页眉/页脚和橡皮筋滚动在主要内容中构建网页：

＆＃13;

def self.from_omniauth(auth)
  where(auth.slice(:provider, :uid)).first_or_initialize.tap do |user|
    user.provider = auth.provider
    user.uid = auth.uid
    user.name = auth.info.name
    user.oauth_token = auth.credentials.token
    user.oauth_expires_at = Time.at(auth.credentials.expires_at)
    user.save!
  end
end

＆＃13;

 html,
 body {
   margin: 0 0;
   height: 100%;
   width: 100%;
   overflow: auto;
 }
 .header,
 .footer {
   height: 50px;
   position: fixed;
   z-index: 100;
   width: 100%;
 }
 .header {
   top: 0;
   background-color: #44677F;
 }
 .footer {
   bottom: 0;
   background-color: #4E3AFF;
 }
 .container {
   height: 100%;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
 .content {
   background-size: 50px 50px;
   background-color: #D0FCFF;
   background-image: linear-gradient(#9DC9FF 50%, transparent 50%, transparent);
   height: 2000px;
 }

＆＃13;

如何更改橡皮筋滚动期间可见区域的背景颜色？

我喜欢使用相同颜色的页眉/页脚，这样当我向上滚动时：

header

当我向下滚动时：

footer

我知道可以通过在正文中设置背景颜色来更改滚动区域的整个颜色：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
</head>

<body>
  <header class="header"></header>
  <div class="container">
    <div class="content"></div>
  </div>
  <footer class="footer"></footer>
</body>

</html>

所以我尝试使用渐变：

.body {
  background-color: rebeccapurple;
}

但它没有用。

Answer 1

您可以实现此目的的一种方法是在内容后面添加固定元素，一个元素用于顶部，一个用于底部，背景颜色与页眉/页脚相同。

#headerBackground {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background-color: #{headerColor}
}
#footerBackground {
    position: fixed;
    bottom: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background-color: #{footerColor}
}
<body>
  <div id="footerBackground "></div>
  <div id="headerBackground "></div>
  <header class="header"></header>
  <div class="container">
    <div class="content"></div>
  </div>
  <footer class="footer"></footer>
</body>

您可能需要使用z-index来获取页眉/页脚后面的内容。

Mobile Safari中的背景颜色和橡皮筋滚动

1 个答案: