背景颜色和橡胶带在移动Safari

我建立一个网页中移动Safari具有固定页眉/页脚和橡胶带中的主要内容滚动滚动：背景颜色和橡胶带在移动Safari

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; 
 
}

<!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>

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

我想用页眉/页脚的颜色相同，所以，当我向上滚动：

header

，当我向下滚动：

footer

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

.body { 
    background-color: rebeccapurple; 
}

，所以我试图用梯度：

.body { 
    background: linear-gradient(to bottom, #44677F 50%, #4E3AFF 50%); 
}

，但没有奏效。

来源

2016-04-28 Paul

滚动是一个事件，因此CSS滚动时无法更改背景。然而，你可以使用JQuery的[.load（）]（http://api.jquery.com/scroll/）API –

@MichaelSchwartz这样做，我很高兴使用JavaScript，如果这是解决这个问题的唯一方法。尽管我不想使用jQuery。 – Paul

我现在在公交车上使用我的手机，因此目前我无法提供太多帮助。 [这里是]（http://kodeweave.sourceforge.net/editor/#42bd3465730905bf15f71b6d1bf9101b）一个编织我嘲笑，告诉你如何使用JQuery的[.load（）]处理样式（http://api.jquery.com/滚动/） –

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

#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来让事情在页眉/页脚之后。

来源

2017-09-15 15:13:03

背景颜色和橡胶带在移动Safari

回答

相关问题