背景顏色和橡膠帶在移動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

回答

相關問題